CSS3：layout_html/css_WEB-ITnose

コンテンツの配置

コンテンツの配置に使用される属性は次のとおりです:
1) Position: 配置方法を設定します
2) left、right、top、bottom: 配置要素のオフセットを設定します
3) z-index: を設定します配置要素 重なり順

配置方法

Position 属性は、要素の配置方法を設定します。 オプションの値は次のとおりです:
1) static: 要素は通常のレイアウトです。デフォルトです。値;
2) 相対: 要素の位置は、通常の位置 (および静的値) の位置を基準とします。
3) 絶対: 要素は、位置値が静的ではない最初の祖先要素を基準として配置されます。そのような要素はなく、body 要素に対して相対的に配置されます。
4) 修正済み: 要素はブラウザ ウィンドウに対して相対的に配置されます。つまり、残りのコンテンツが上にスクロールするか下にスクロールするかに関係なく、要素は常に同じ位置を占めます。
left、right、top、bottom 属性を使用して要素のオフセットを設定する場合、position 属性で指定された要素に対する相対的なオフセットを指します。
これらの属性値の意味を理解するためにいくつかの例を使用します:

Chrome の

<button>First</button><br><button>Second</button><br><button>Last</button><br>

インターフェイスの効果は次のとおりです:

次に、最初のボタンにスタイルを追加します:

<button style="position: static;top: 200px;">First</button><br><button>Second</button><br><button>Last</button><br>

追加後このスタイル、インターフェイスの効果には変化はありませんが、position の値を相対値に変更すると、次のようになります:

<button style="position: relative;top: 200px;">First</button><br><button>Second</button><br><button>Last</button><br>

次に、レイアウトの効果が変化します:

ここから、次のことがわかります。位置の値は静的です。上部の設定は効果がありません。位置の値が相対的な場合、要素の上部の位置は静的な上部の値に設定された上部の値を加えたものになります。
次に、2 番目のボタンの位置を絶対に設定します。

Chrome での

<button>First</button><br><button style="position: absolute;top: 200px;">Second</button><br><button>Last</button><br>

の効果は次のとおりです

この設定には効果があります。次に、2 番目のボタンに p 要素の親ノードを与え、スタイルの位置の値を相対 (非静的) に設定します。

2 番目のボタンが相対的なものになるため、クロムの

<p style="position: relative;top: 100px;">	<button>First</button>	<br>	<button style="position: absolute;top: 200px;">Second</button>	<br>	<button>Last</button>	<br></p>

の効果が変更されました。位置の値 static の最初の祖先要素に対して位置が設定されていません。

最初のボタンのスタイルを次のように設定すると:

Chrome での

<p style="position: relative;top: 100px;">	<button style="position: relative;top: 200px;">First</button>	<br>	<button style="position: absolute;top: 200px;">Second</button>	<br>	<button>Last</button>	<br></p>

の効果は次のとおりです:

最初のボタンが消えていることがわかりますが、実際には最初のボタンが表示されます。ボタンは実際には消えず、2 番目のボタンで覆われています。その理由は、最初のボタンはその静的位置を基準にして上から 200 ピクセル離れた位置に設定され、2 番目のボタンは p 要素の位置を基準として上から 200 ピクセル離れた位置に設定されているためです。最初のボタンの静的な位置は、実際には p 要素の位置であるため、最初のボタンと 2 番目のボタンは重なっています。
位置が固定されている例を見てみましょう:

Chrome での

<p style="position: relative;top: 100px;">	<button style="position: relative;top: 200px;">First</button>	<br>	<button style="position: absolute;top: 600px;">Second</button>	<br>	<button style="position: fixed;top: 110px;">Last</button>	<br></p>

の効果は次のとおりです:

からスクロール バーをドラッグするときは、スクロール バーの位置に注意してください。上から下に向かって、ブラウザに対する最後のボタンの位置は変わりません。

要素の重なり順

z-index 属性は、要素の重なり順を数値で指定し、値が小さいほど後ろに表示されます。積み重ねる順番。このプロパティは、要素が重複する場合にのみ役に立ちます。
z-index 属性のデフォルト値は 0 です。

複数列レイアウト

複数列属性は、以下を含む複数の垂直列でのコンテンツのレイアウトをサポートします。
1) 列数: 列数、数値を指定します。
2) 列フィル: コンテンツを指定します。列間 分散方法: 自動は順番に埋めることを意味し、バランスはブラウザが異なる列間の長さの差をできるだけ小さくすることを意味します
3) 列ギャップ: 列間の距離と長さの値を指定します。 -rule: ステートメント内の column-rule-* の省略属性を設定します。