CSS の基本: 位置と浮動小数点

CSS には、位置決めとフローティングのプロパティが用意されており、これらを使用すると、列状のレイアウトを作成したり、レイアウトの一部を別の部分に重ねたり、長年にわたって複数のテーブルを使用する必要が多かったタスクを実行したりできます。
位置決めの基本的な考え方はシンプルで、通常の位置、または親要素、別の要素、またはブラウザ ウィンドウ自体を基準にして要素のボックスを表示する場所を定義できます。明らかに、この機能は非常に強力で驚くべきものです。ユーザー エージェントが CSS2 での位置決めを他の側面よりもはるかに適切にサポートしていることは驚くべきことではありません。
一方、Float は CSS1 で初めて導入され、Web の初期に Netscape によって追加された機能に基づいていました。フローティングは正確な位置決めではありませんが、通常のフロー レイアウトでもないことは確かです。 float の意味については後の章で説明します。

すべてはフレームです

div、h1、または p 要素は、ブロックレベル要素と呼ばれることがよくあります。これは、これらの要素がコンテンツのブロック、つまり「ブロック ボックス」として表示されることを意味します。対照的に、span や Strong などの要素は、そのコンテンツが 1 行、つまり「インライン ボックス」内に表示されるため、「インライン要素」と呼ばれます。
表示プロパティを使用して生成されるボックスの種類を変更できます。これは、表示プロパティを block に設定することで、インライン要素 (<a> 要素など) をブロック レベルの要素のように動作させることができることを意味します。また、display を none に設定して、生成された要素にボックスがまったく存在しないようにすることもできます。こうすることで、ボックスとそのすべての内容が表示されなくなり、文書内のスペースを占有しなくなります。
ただし、明示的な定義がなくてもブロック レベルの要素が作成される場合があります。これは、ブロックレベルの要素 (div など) の先頭にテキストを追加すると発生します。テキストが段落として定義されていない場合でも、段落として扱われます。


この場合、ボックスは特別に定義された要素に関連付けられていないため、名前のないブロック ボックスと呼ばれます。
ブロックレベル要素のテキスト行でも同様のことが起こります。 3 行のテキストを含む段落があるとします。テキストの各行は名前のないボックスを形成します。スタイルを適用する場所がないため、名前のないブロックまたはライン ボックスにスタイルを直接適用することはできません (ライン ボックスとインライン ボックスは 2 つの異なる概念であることに注意してください)。ただし、画面に表示されるものはすべて、ある種のボックスを形成していることを理解するのに役立ちます。

CSS の位​​置決めメカニズム

CSS には、通常のフロー、フロート、および絶対配置という 3 つの基本的な配置メカニズムがあります。
特に指定がない限り、すべてのボックスは通常のフローに配置されます。つまり、通常のストリーム内の要素の位置は、X(HTML) 内の要素の位置によって決まります。
ブロックレベルのボックスが上から下に次々と配置され、ボックス間の垂直距離はボックスの垂直方向の余白から計算されます。
インラインボックスは横一列に配置されます。それらの間隔は、水平方向のパディング、境界線、およびマージンを使用して調整できます。ただし、垂直方向のパディング、境界線、およびマージンはインライン ボックスの高さには影響しません。ラインによって形成される水平ボックスはライン ボックスと呼ばれます。ライン ボックスの高さは常に、そこに含まれるすべてのインライン ボックスを収容するのに十分な高さになります。ただし、行の高さを設定すると、このボックスの高さが大きくなる可能性があります。
以下では、相対位置決め、絶対位置決め、フローティングについて詳しく説明します。

CSS 位置プロパティ

Position プロパティを使用すると、要素のボックスの生成方法に影響する 4 つの異なるタイプの配置から選択できます。
位置属性値の意味:
静的
要素ボックスは正常に生成されます。ブロックレベル要素はドキュメント フローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上のライン ボックスを作成します。
相対的
要素ボックスは一定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。
絶対
要素ボックスはドキュメント フローから完全に削除され、そのボックスを含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスのタイプに関係なく、配置後にブロック レベルのボックスを生成します。
修理済み
要素ボックスは、そのボックスを含むブロックがビューポート自体であることを除いて、位置を絶対に設定するのと同じように動作します。
ヒント: 要素の位置は通常のフロー内の位置に対して相対的なものであるため、相対配置は実際には通常のフロー配置モデルの一部と見なされます。

CSS 配置プロパティ

CSS 配置プロパティを使用すると、要素を配置できます。
プロパティの説明
Position は、要素を静的、相対、絶対、または固定位置に配置します。
top は、位置決めされた要素の上マージン境界と、その要素を含むブロックの上境界との間のオフセットを定義します。
right は、位置決めされた要素の右マージン端と、その要素を含むブロックの右端の間のオフセットを定義します。
bottom は、位置決めされた要素の下マージン境界と、その要素を含むブロックの下境界との間のオフセットを定義します。
left は、位置決めされた要素の左マージン端と、その要素を含むブロックの左端の間のオフセットを定義します。
overflow は、要素のコンテンツがその領域をオーバーフローした場合に何が起こるかを設定します。
クリップは要素の形状を設定します。要素はこの形状にクリップされて表示されます。
vertical-align は要素の垂直方向の配置を設定します。
z-index は要素の積み重ね順序を設定します。