CSS 定位
CSS 定位（ポジショニング）属性は、要素の定位を行うことを許可します。
CSS 定位とフローティング
CSS は定位とフローティングにいくつかの属性を提供しており、これらの属性を使用して、列式レイアウトを構築し、レイアウトの一部を他の一部に重ね合わせることができます。また、これまでに複数のテーブルを使用して完了する必要があったタスクを完成することもできます。
定位の基本思想は非常にシンプルであり、要素のフレームがその通常の位置に対してどのように配置されるべきか、または親要素、他の要素、またはブラウザのウィンドウ自体に対してどのように配置されるべきかを定義することができます。明らかに、この機能は非常に強力であり、驚くべきものです。ユーザーエージェントが CSS2 での定位に対するサポートは他の側面よりもずっと優れていることを知っておくべきです。
他方において、CSS1 では初めてフローティングが提案され、それが Netscape がウェブの初期段階で追加した機能に基づいている。フローティングは完全な定位ではないが、もちろん通常のフローティングレイアウトでもない。その意味を後の章で明確にする予定です。
すべてがボックスです
div、h1、またはp要素はよくブロックレベルの要素と呼ばれます。これは、これらの要素がある内容「ブロックボックス」と呼ばれます。これに対して、spanやstrongなどの要素は「インライン要素」と呼ばれます。なぜなら、これらの内容は行の中に表示されるからです。
以下を使用して display属性生成されるボックスのタイプを変更します。これは、display属性をblockに設定することで、インライン要素（例えば<a>要素）がブロック要素のように見えるようにすることができます。また、displayをnoneに設定することで、生成された要素にボックスが生成されず、そのすべての内容が表示されず、文書内のスペースを占めません。
しかし、特定の定義がなくても、ブロックレベルの要素が生成される場合があります。これは、ブロックレベルの要素（例えばdiv）の先頭にテキストを追加する場合に発生します。これらのテキストをパラグラフとして定義していない場合でも、それはパラグラフとして扱われます：
<div> いくつかのテキスト <p>さらに多くのテキスト。</p> </div>
この場合、このボックスは無名ブロックボックスと呼ばれます。なぜなら、これは特別に定義された要素に関連していないからです。
ブロックレベルの要素のテキスト行も同様のことが起こります。3行のテキストを含む段落があると仮定します。各行のテキストは無名のボックスを形成します。无名のブロックや行ボックスにスタイルを適用することはできません。なぜなら、スタイルを適用する場所がないからです（注意、行ボックスと行内ボックスは異なる概念です）。ただし、これはスクリーン上に見えるすべてが某种ボックスで形成されていることを理解するのに役立ちます。
CSS定位メカニズム
CSSには基本的な定位メカニズムが3種類あります：通常のフロー、フロート、絶対定位。
特別に指定しない限り、すべてのボックスは通常のフローで定位されます。つまり、通常のフロー内の要素の位置は(X)HTML内の要素の位置で決定されます。
ブロックボックスは上から下に順に並びます。ボックス間の垂直距離はボックスの垂直外縁マージンで計算されます。
行内ボックスは一行で水平に配置されます。水平インラインマージン、境界線、および外縁マージンを使用してその間隔を調整できます。ただし、垂直インラインマージン、境界線、および外縁マージンは行内ボックスの高さに影響しません。一行で形成される水平ボックスは行ボックス（Line Box）行ボックスの高さは常に行内ボックスを含むために十分です。ただし、行高を設定することでこのボックスの高さを増やすことができます。
以下の章では、相対定位、絶対定位、フロートについて詳細に説明します。
CSS position 属性
使用することで position属性私たちは4種類の異なる定位を選択できます。これにより、要素のボックス生成の方法が影響されます。
position属性の意味：
- static
- 要素のボックスは通常生成されます。ブロックレベルの要素は矩形のボックスを生成し、文書のフローの一部として、インライン要素は親要素の中に配置される一つまたは複数の行ボックスを生成します。
- relative
- 要素のフレームは特定の距離を偏移させます。要素は定位される前にその形状を保ち、その原本の空間は保持されます。
- absolute
- 要素のフレームはドキュメントのフローから完全に削除され、フレームの含むブロックに対して定位されます。フレームの含むブロックはドキュメント内の別の要素または初期フレームの含むブロックです。要素が通常のドキュメントフローで占めていた空間は閉じられ、要素が存在しなかったかのように見えます。要素が定位されると、元々の正常フローで生成されたフレームの種類に関わらず、ブロックレベルのフレームが生成されます。
- fixed
- 要素のフレームの表現は、positionをabsoluteに設定した場合と同様ですが、フレームの含むブロックはウィンドウ自体です。
ヒント：相対定位は、実際には通常のフロー定位モデルの一部と見なされます。要素の位置は通常のフロー内の位置に対して設定されます。
実例
- 定位：相对定位
- この例では、要素の通常位置に対して定位する方法を示します。
- 定位：绝对定位
- この例では、要素を定位するための絶対値を使用する方法を示します。
- 定位：固定定位
- ブラウザのウィンドウに対して要素を定位する方法を示します。
- 固定値で画像の上部を設定する
- 画像の上部を固定値で設定する方法を示します。
- パーセンテージで画像の上部を設定する
- 画像の上部をパーセンテージで設定する方法を示します。
- ピクセル値で画像の底部を設定する
- 画像の底部をピクセル値で設定する方法を示します。
- パーセンテージで画像の底部を設定する
- 画像の底部をパーセンテージで設定する方法を示します。
- 固定値で画像の左端を設定する
- 画像の左端を固定値で設定する方法を示します。
- パーセンテージで画像の左端を設定する
- 画像の左端をパーセンテージで設定する方法を示します。
- 固定値で画像の右端を設定する
- 画像の右端を固定値で設定する方法を示します。
- パーセンテージで画像の右端を設定する
- 画像の右端をパーセンテージで設定する方法を示します。
- スクロールバーを使用して要素内の溢出内容を表示する方法
- 要素の内容が指定されたエリアを超える場合、溢出属性を設定して適切なアクションを定義する方法を示します。
- オーバーフローする要素内の内容を隠す方法
- 要素内の内容が指定されたエリアに適さない場合、overflow属性を設定して内容を隠す方法を示します。
- ブラウザが自動的にオーバーフローを処理する方法
- この例では、ブラウザが自動的にオーバーフローを処理するように設定する方法を示します。
- 要素の形状を設定する
- この例では、要素の形状を設定する方法を示します。この要素はこの形状内に切り取られ、表示されます。
- 垂直に配置する画像
- この例では、テキストの中で垂直に画像を配置する方法を示します。
- Z-index
- Z-indexを使用して、一つの要素を別の要素の後ろに配置することができます。
- Z-index
- 上記の例では、要素の Z-index が変更されています。
CSS 定位属性
CSS 定位属性は、要素を定位するために使用できます。
| 属性 | 説明 |
|---|---|
| position | 要素を静的、相対的、絶対的、または固定の位置に配置します。 |
| top | 定位要素の上外側余白境界とそのコンテナの上境界間のオフセットを定義します。 |
| right | 定位要素の右外側余白境界とそのコンテナの右境界間のオフセットを定義します。 |
| bottom | 定位要素の下外側余白境界とそのコンテナの下境界間のオフセットを定義します。 |
| left | 定位要素の左外側余白境界とそのコンテナの左境界間のオフセットを定義します。 |
| overflow | 要素の内容がそのエリアを超えた場合に発生することを設定します。 |
| clip | 要素の形状を設定します。要素はこの形状に切れ込まれ、次に表示されます。 |
| vertical-align | 要素の垂直アライメントを設定します。 |
| z-index | 要素のスタッキング順序を設定します。 |
