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 ブロックレベル要素の概要と違い

推薦する

MySQL の日付型の単一行関数コードの詳細な説明

MySQL の日付型単一行関数: CURDATE()またはCURRENT_DATE()は現在の日付を...

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...

Vue の新しいパートナー TypeScript クイックスタート実践記録

目次1. 公式の足場を使って構築する2. プロジェクトディレクトリ分析3. TypeScript の...

Web ページ WB.ExecWB 制御印刷メソッド呼び出しの説明とパラメータの紹介

WebページWB.ExecWB制御印刷方法コードをコピーコードは次のとおりです。 <テーブルの...

Apache Superset を使用して ClickHouse データを視覚化する 2 つの方法

Apache Superset は、データを表示および探索する方法を提供する強力な BI ツールで...

Tencent Cloud Server での Jenkins の設定方法の詳細

目次1. Tencent Cloud Serverに接続する2. 環境整備Jenkinsのデプロイメ...

MacOS で Docker を使用して MySQL マスター スレーブ データベースを作成する方法

1. MySQLイメージを取得するターミナルから最新のMySQLイメージを取得するdocker pu...

VMware Workstation Pro でサーバー仮想マシンを構築する (グラフィック チュートリアル)

私が使用している VMware Workstation Pro のバージョンは次のとおりです。 1....

シェルスクリプトは、Docker の半自動コンパイル、パッケージ化、およびリリースアプリケーション操作を構築します。

Docker 公開方法は、DevOps (送信、コンパイル、パッケージ化、リリースなどの一連のイベ...

Nginx+Apache の動的および静的分離の導入の詳細な例

Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...

MySQL DMLステートメントの使用に関する詳細な説明

序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...

MySQL インデックス使用状況監視スキル (収集する価値あり!)

概要リレーショナル データベースでは、インデックスは、データベース テーブル内の 1 つ以上の列の値...

MySQL最新バージョン8.0.17解凍版インストールチュートリアル

個人的にはインストール版よりも解凍版の方がインストールしやすいと思います。早速、解凍版のインストール...

1つの記事でJavaScript DOM操作の基本を学ぶ

DOM の概念DOM: ドキュメント オブジェクト モデル: ドキュメント オブジェクト モデルは、...

vue WatchとComputedの使用の概要

目次01. リスナーウォッチ(1)機能(2)特性と方法(3)監視対象(4)リスニングアレイ02. 計...