CSS レイアウト - position 属性
- 前のページ CSSmax-width
- 次のページ CSSz-index
position 属性指定は、要素の位置決定方法のタイプ（static、relative、fixed、absoluteまたはsticky）に適用されます。
position 属性
position 属性は、要素に適用される定位方法のタイプを指定します。
五つの異なる位置値があります：
- static
- relative
- fixed
- absolute
- sticky
要素は実際には top、bottom、left、right 属性を使用して定位されます。ただし、position 属性が最初に設定されない場合、これらの属性は機能しません。異なる position 値によって、これらの属性の動作も異なります。
position: static;
HTML 要素はデフォルトで static（静的）の定位方法を使用します。
静的定位の要素は top、bottom、left、right 属性に影響されません。
position: static; の要素は特別な定位方法を持ちません；常にページの正常なフローに基づいて定位されます：
これは使用している CSS です：
例
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
position: relative; の要素はその正常位置に対して定位されます。
相対定位の要素の top、right、bottom、left 属性を設定することで、その正常位置からずれて調整されます。その要素が残す空間に合わせて他のコンテンツを調整することはありません。
これは使用している CSS です：
例
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
position: fixed; の要素はビューポートに対して定位されています。これは、ページをスクロールしても常に同じ位置にいることを意味します。top、right、bottom、left 属性はこの要素の定位に使用されます。
固定定位の要素は、ページ内で通常配置されるべき位置に隙間を残しません。
ページの右下角に固定されているこの要素に注意してください。これは使用している CSS です：
例
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
position: absolute; の要素は最も近い定位祖先要素に対して定位されます（fixedの場合は、ビューポートに対して定位されます）。
しかし、絶対定位の要素に祖先がなければ、ドキュメントの主体（body）を使用し、ページのスクロールとともに移動します。
注意：「定位された」要素は、その位置が除かれています static それ以外のどんな要素も。
これは簡単な例です：
これは使用している CSS です：
例
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;
position: sticky; の要素はユーザーのスクロール位置に基づいて定位されます。
粘性要素はスクロール位置に基づいて相対（relative）および固定（fixed）間で切り替わります。最初は相対定位されますが、ビューポート内で指定されたオフセット位置に達すると、それ以降は適切な位置に「貼り付けられます」（例えばposition:fixed）。
注意：Internet Explorer、Edge 15およびそれ以前のバージョンは粘性定位をサポートしていません。Safariでは-webkit-接頭辞が必要です（以下の例を参照してください）。さらに、少なくとも以下のものを指定する必要があります top、right、bottom または left その中の1つで、粘性定位が機能するようにするためです。
この例では、スクロール位置に達したときに、sticky要素がページの顶部に留まります（top: 0）。
例
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
重なった要素
要素を定位する際には、他の要素と重なることがあります。
z-index 属性は要素のスタッキングオーダーを指定します（どの要素が他の要素の前に配置されるべきか）。
要素は正または負のスタッキングオーダーを設定できます：
これはタイトルです
画像のz-indexが-1であるため、テキストの後ろに配置されます。
例
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
より高いスタッキングオーダーの要素は常により低いスタッキングオーダーの要素の前に配置されます。
注意：二つの定位要素が重なっていて指定されていない場合 z-index、HTMLコードの最後の要素が上に表示されます。
他の例もご覧ください
- 要素の形状を設定
- この例では、要素の形状を設定する方法を示します。要素はこの形状にカットされ、表示されます。
すべての CSS 定位属性
| 属性 | 説明 |
|---|---|
| bottom | 設定定位框の底部外縁マージン。 |
| clip | 絶対定位の要素をカットアウトします。 |
| left | 定位フレームの左側マージンエッジを設定します。 |
| position | 要素の定位タイプを指定します。 |
| right | 定位フレームの右側マージンエッジを設定します。 |
| top | 定位フレームのトップマージンエッジを設定します。 |
| z-index | 要素のスタッキング順序を設定します。 |
- 前のページ CSSmax-width
- 次のページ CSSz-index
