CSS での配置の使用方法の詳細な研究 (要約)

CSS での配置の使用方法の詳細な研究 (要約)

CSS における位置指定の概要

position属性は英語で位置を意味し、 CSSでの主な機能は要素の配置を設定することです。

CSSには3種類の配置方法があります。

プロパティ値説明する
修理済み固定位置を設定します。
相対的相対的な位置を設定します。
絶対絶対位置を設定します。

固定ポジショニングの練習

固定配置を練習する前に、コード構造がどのようになっているかを見てみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      
       幅: 100ピクセル;
       高さ: 100px;
       背景色: 赤;
       マージン: 0;
       パディング: 0;
     }
     div{
       幅: 200ピクセル;
       高さ: 200px;
       背景色:春緑;
        マージン: 0;
        パディング: 0;
     }
  </スタイル>
</head>

<本文>
   <h1 class="box"></h1>
   <div></div>
</本文>

</html>

結果プロット

ここで、 h1要素を固定位置に設定して、上記の構造上の実践とどのように異なるかを確認し、次に固定位置の特徴のいくつかを分析します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      位置:固定;
       幅: 100ピクセル;
       高さ: 100px;
       背景色: 赤;
       マージン: 0;
       パディング: 0;
     }
     div{
       幅: 200ピクセル;
       高さ: 200px;
       背景色:春緑;
        マージン: 0;
        パディング: 0;
     }
  </スタイル>
</head>

<本文>
   <h1 class="box"></h1>
   <div></div>
</本文>

</html>

結果プロット

固定位置決め特性は次のように分析されます。

  • 固定位置はブラウザウィンドウを基準に設定されます。ページがどのようにスクロールされても、固定位置の要素の位置は影響を受けません。
  • 固定配置要素の特徴: 標準のドキュメントフローから分離されています。
  • 固定位置要素の特徴: 標準のドキュメントフローの要素よりも階層が高いため、h1 タグに固定位置を設定すると、div タグと重なります。
  • 固定配置要素の特徴: h1タグはdivタグの上にあるため、固定配置要素はスペースを占有しなくなります。

相対的な位置の練習

相対的な配置を練習する前に、コード構造がどのようになっているかを見てみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

ここで、 .div2要素のclass属性値を相対配置に設定して、上記の構造的実践との違いを確認し、相対配置のいくつかの特性を分析します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
       位置: 相対的;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

注意: 相対配置の座標位置を設定しないと、まったく移動しません。

作成者はclass属性値を使用してdiv2要素の位置座標を設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
       位置: 相対的;
       左: 50px;
       上: 50px;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

相対的な位置決め特性は次のように分析されます。

  • 相対的に配置した要素は、標準のドキュメント フローから外れません。
  • 相対的に配置された要素に座標が設定されていない場合、その要素はそのまま配置されます。
  • 相対的に配置された要素は座標位置を設定し、元の位置に基づいて移動位置の計算を開始します。
  • 相対的に配置された要素は、標準のドキュメント フロー内の要素よりも高いレベルにあり、標準のドキュメント フロー内の要素をカバーします。
  • 相対的に配置された要素の場合は、負の値に設定できます。

絶対位置決めの練習

絶対位置決めを実践する前に、コード構造がどのようになっているかを見てみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

ここで、 .div2要素のclass属性値を絶対位置に設定して、上記の構造的実践との違いを確認し、次に絶対位置付けのいくつかの特徴を分析します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
       位置:絶対;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

注意: 絶対配置は標準のドキュメント フローの範囲外です。

div2要素の位置座標は、 class属性値で設定します。読者に直感的な印象を与えるために、最も外側のdiv要素を中央揃えに設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      マージン: 0px 自動;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
       位置:絶対;
       左:0px;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

注: 絶対位置の要素がブラウザの左端に表示されるのはなぜですか? 絶対位置の移動の原則: 絶対位置の要素は、親要素を探して、位置があるかどうかを確認します。位置がある場合は、親要素に従って配置します。親要素に位置がない場合は、親要素の親要素を探して、位置があるかどうかを確認します。これは、 body要素がブラウザの位置であるため、 body要素が停止するまで続きます。ここまで述べて、著者は新しい学習者に直感的な印象を与えましたので、実際に試して、本当のトリックを見てみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      マージン: 0px 自動;
      位置: 相対的;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
       位置:絶対;
       右:0px;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

注: 現在、著者は絶対配置座標を右配置に変更し、親要素は相対配置を設定しています。ここでは実践しません。配置された親要素の親要素が祖父要素でもあり、親要素と祖父要素の両方が同時に配置されている場合、要素は祖父要素ではなく親要素に従って配置されます。

絶対位置決めの特性は次のように分析されます。

  • 絶対位置に配置された要素は、標準のドキュメント フローの範囲外です。
  • 絶対位置に配置された要素は、標準のドキュメント フロー内の要素をオーバーライドします。
  • 絶対位置に配置された要素は、スペースを占有しなくなります。
  • 絶対位置に配置された要素は、親要素の祖先要素の間にあるかどうかに基づいて配置されます。祖先要素の間にある場合、配置は最も近い要素に基づいて設定されます。祖先要素の間にない場合は、配置は body 要素に基づいて設定されます。
  • 絶対配置された要素の親要素は、絶対配置を含め、あらゆる方法で配置できます。通常は絶対配置と組み合わせて使用​​される相対配置を使用することをお勧めします。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  さまざまなネットワーク画像形式におけるPNGの利点の詳細な説明

>>:  HTML インライン要素と HTML ブロックレベル要素の概要と違い

推薦する

Canonical が Flutter で Linux デスクトップ アプリを有効化 (推奨)

Google の Flutter の目標は、どのプラットフォームを使用していても、ネイティブの速度...

WindowsにMySQL5.7圧縮パッケージを素早くインストールする

この記事では、Windows に MySQL 5.7 圧縮パッケージをインストールする方法について説...

CSS はこのように使用できますか?気まぐれなグラデーションの芸術

前回の記事「1行のCSSコードの魅力」では、たった1行のCSSコードで生成できる美しい(奇妙な感じと...

Docker で lnmp をデプロイする詳細な手順

目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...

DIV 背景半透明テキスト非半透明スタイル

DIVの背景は半透明ですが、DIV内の文字は半透明ではありませんコードをコピーコードは次のとおりです...

MySQL 8.0.22 winx64 のインストールと設定方法のグラフィックチュートリアル

MySQL-8.0.22-winx64のデータベースインストールチュートリアルは参考になります。具体...

8桁の割引コードをランダムに生成し、MySQLデータベースに保存します。

現在、多くの企業が割引コードを通じてプロモーションを行っています。今では、8桁の割引コードを実装して...

MySQLでよく使われる文字列関数トップ10の詳細な説明

こんにちは、みんな!技術の話ばかりで髪は切らないトニーです。データベース関数は、何らかの機能を持ち、...

Docker コンテナで ASP.NET Core を実行する手順

最近は学ぶべき知識が多すぎて、どれを先に学べばいいのかわかりません。このブログはもともとxamari...

Vue.jsでタブ切り替えと色変更操作を実装する解説

この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...

mysql 8.0.18 mgr のインストールと切り替え機能

1. システムインストールパッケージ yum -y インストール make gcc-c++ cmak...

webpackを使用してTypeScriptコードをパッケージ化およびコンパイルする方法を教えます

TypeScript バンドルwebpack 統合通常、実際の開発では、ビルド ツールを使用してコー...

Mysqlチュートリアルでのグループランキングの実装例の詳細な説明

目次1. データソース2. データの総合順位1) 総合ランキング2) 同順位3) 同順位3. データ...

Nginx インストール エラーの解決方法

1. nginx-1.8.1.tar.gzを解凍する2. fastdfs-nginx-module-...

VMWare を使用して Windows 上で Linux 環境を構築する手順 (画像とテキスト)

Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...