CSS の配置例の説明

小云云オリジナル: 2018-02-02 10:46:391413ブラウズ

この記事では、CSS の配置に関するチュートリアルを中心に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1.文書の流れ

簡単に言うと、HTMLの中で要素を位置順に並べていく処理です。 HTML のレイアウトメカニズムはドキュメントフローモデルを使用します。つまり、ブロック要素は 1 行を占め、インライン要素は 1 行を占めません。

一般に、マージンは要素を互いに分離するために使用され、パディングは要素をコンテンツから分離するために使用されます。マージンは、要素が互いに独立できるように要素を区切るためにレイアウトに使用され、パディングは要素とコンテンツの間のスペースに使用され、コンテンツ (テキスト) と (ラップされた) 要素の間に「距離」を確保します。フロートまたは絶対配置でレイアウトされていない限り、ドキュメントフロー内にあります。

2. Position 属性の概要

静的、デフォルト値。位置が静的に設定されている要素は、常にドキュメントフローによって指定された位置にあります。
inherit は、position 属性の値が親要素から継承されることを指定します。ただし、Internet Explorer (IE8 を含む) のどのバージョンでも、属性値「inherit」はサポートされていません。
修正済み、絶対位置の要素を生成します。デフォルトでは、ブラウザウィンドウを基準にして指定した座標に配置できます。
要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。要素は、ウィンドウがスクロールされているかどうかに関係なく、その位置に留まります。ただし、祖先要素にtransform属性があり、属性がない場合、座標はブラウザウィンドウではなく、祖先要素を基準にして指定されます。
absolute は、要素に最も近い位置にある祖先要素を基準にして絶対位置の要素を生成します。
この要素の位置は、「left」、「top」、「right」、「bottom」属性で指定できます。
relative は、ドキュメント内の要素の初期位置を基準にして、相対的に配置された要素を生成します。
「left」、「top」、「right」、「bottom」属性を使用して、この要素の独自の位置に対する相対的なオフセットを設定します。

3. 相対配置

relative は、通常の位置を基準にして相対的に配置された要素を生成します。

相対配置のプロセスは次のとおりです:

デフォルトの方法 (静的) で要素を生成します (要素はレイヤーのようにフロートします)。前の位置の移動と比較して、移動の方向と振幅は左、右、上、下の属性によって決まります。オフセット前の位置は変更されません。

  <style type="text/css">     
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }
  </style>
  <p id="box1"></p>
  <p id="box2"></p>

box2 のコメントコードが有効になる前に、ドキュメントフローに従って並べ替えられて表示されます。

ただし、コメントコードのコメントが解除されて有効になると、ドキュメントフロー内で表示されるべき位置に相対的に移動します。

つまり、相対位置決めの基準オブジェクトはそれ自体です。

4. 絶対配置

絶対配置と相対配置の大きな違いは、要素を絶対配置に設定すると、この要素はドキュメントフローから切り離され、他の要素はこの要素がドキュメントフローであると認識することです。ドキュメントストリーム内に存在せず、元の位置を埋めます。絶対配置要素は、その祖先要素の位置設定によって決定される参照に基づいてその位置を移動します。

その祖先要素の位置設定に基づくいわゆる決定は、次のように単純に理解されます:

その要素の最も近くに位置する祖先要素を基準として、位置設定が設定された祖先要素がない場合、参照オブジェクトはボディです層。

祖先要素が配置されていない場合は、absolute を使用します。この場合、参照オブジェクトはボディです。
先祖要素は位置指定を持っています。祖先要素がposition:static以外の値に設定されている限り、位置指定があるとみなされ、最も近い先祖要素が絶対位置指定要素の参照として設定されます。この場合、参照は最も近い祖先要素です。
左/右と上/下が設定されていない場合、絶対要素の位置はドキュメントフロー内の要素の位置になります

CSS の配置例の説明

関連記事