position
position は要素の配置方法を指定します。位置決めをする場合は top, right, bottom, left プロパティを指定します。
- 値
- static, relative, absolute, fixed, sticky
- 初期値
- static
- 対象
- すべての要素
- 継承
- しない
- CSS レベル
- CSS 2.1, CSS3（CSS Positioned Layout Module Level 3）
値の詳細
- static
- 通常のレイアウトの流れに従って配置。 top, right, bottom, left の各プロパティは適用されません。
- relative
- 通常のレイアウトの流れに従って配置された時の要素の位置から top, right, bottom, left の値に基づき相対的に配置。本来要素が配置されていた空間はそのまま保持されます。
- absolute
- 通常のレイアウトの配置から除外され top, right, bottom, left の値に基づいて絶対配置されます。祖先の要素に static 以外の指定がある場合はその位置を基準に配置され static が指定されている時は Web ブラウザの表示領域の左上を基準に配置されることになります。
- fixed
- absolute 指定と同じように絶対配置されますが、画面のスクロールに影響されず常に同じ位置に固定されます。
- sticky
- 要素が Web ブラウザの領域内に表示されている時は static と同じように配置されます。画面のスクロールによって要素が Web ブラウザの表示領域から外れると表示領域内に固定されます。
position: sticky; が指定されている要素の親以上の要素に overflow が指定されている場合に動作しないことがあります。
サンプル
HTML
<div class="item">
<h1>親要素 position: relative;</h1>
<p id="box1">position が適用される要素<br />
left: 50px;<br />
top: 20px;</p>
</div>CSS
.item {
padding: 20px;
background-color: #dddddd;
width: 300px;
position: relative;
}
.item > p {
margin: 0;
width: 200px;
height: 150px;
background-color: #999999;
left: 50px;
top: 20px;
position: sticky;
}