positionプロパティに指定できる値
positionプロパティには次のような値を設定することができます。
| 値 | 内容 |
|---|---|
| static | 初期値。要素の位置を指定しない。 |
| relative | 位置の基準要素として指定。子要素の位置を指定するために親要素に対して指定します。 |
| absolute | 基準要素をもとに要素の表示位置を指定。 |
| fixed | ブラウザの表示領域の範囲で要素の表示位置を指定。ページをスクロールしても要素は位置をキープする。 |
| sticky | 指定した閾値まではfixedと同様にスクロールしても表示位置をキープし、閾値から出るとstaticと同様に位置指定なしの表示になります。 |
使用例1: absolute
親要素に「relative」、子要素に「absolute」を指定し、子要素の表示位置を指定する例になります。
positionプロパティ指定後に、「top」「bottom」「left」「right」プロパティを使って位置を指定します。
CSS コード例
.box1 {
position: relative;
}
.box1 .element1 {
position: absolute;
top: 20px;
left: 30px;
}
.box1 .element2 {
position: absolute;
bottom: 20px;
right: 50px;
}
.box1 .element3 {
position: absolute;
bottom: -70px;
left: 50%;
}HTML コード例
<div class="box1">
<div class="element1">Element1</div>
<div class="element2">Element2</div>
<div class="element3">Element3</div>
</div>ブラウザで表示すると以下のようになります。
使用例2: fixed
親要素に「relative」、子要素に「fixed」を指定し、子要素を固定表示する例です。
「absolute」との違いは、起点が親要素ではなくブラウザの表示領域になる点と、ページをスクロールしても位置を固定して表示できる点です。
CSS コード例
.box2 {
position: relative;
}
.box2 .element1 {
position: fixed;
top: 0px;
left: 0px;
}HTML コード例
<div class="box2">
<div class="element1">Element1</div>
</div>ブラウザで表示すると以下のようになります。
