概要
CSSプロパティ｢position｣は、要素の配置方法を指定します。配置方法は｢相対位置｣か「絶対位置」かのどちらかです。またこのプロパティで指定するのは配置方法のみで、実際に表示させたい要素の位置を指定するためには、top, bottom, left, right プロパティを組み合わせる必要があります。
言葉での説明は難しいプロパティなので、代表的な３つの値を実際の例を見ながら確認していきましょう。
値：relative
｢relative｣ は相対的な配置となります。この値を指定された要素に top 10px, left 10pxを指定します。そうすると、通常配置される位置からそれぞれ10px要素が移動しているのがわかります。
<p>通常の位置</p>
<p class="relative top-left-10px">top:10px, left:10pxを指定した要素</p>
<p>通常の位置</p>
<style>
* {
padding: 0;
margin: 0;
}
p {
border: 1px solid #000;
background-color: #def;
width: 300px;
}
.relative {
position: relative;
}
.top-left-10px {
top: 10px;
left: 10px;
}
</style>値：absolute
｢absolute｣ は絶対的な配置となります。この値を指定された要素に top 10px, left 10pxを指定します。そうすると、親ボックスに「static」以外の値が指定されている場合は、その親ボックスの左上が基準点となります。もし、指定がない場合はウインドウ全体の左上が基準点となります。
この例では、<p>要素を囲っている<div>要素にrelativeの値を指定しています。そうすることで、<div>要素の左上が基準点になりました。そこから上から10px, 左から10px移動した位置に該当の<p>要素が移動しました。
<div>
<p>通常の位置</p>
<p class="absolute top-left-10px">top:10px, left:10pxを指定した要素</p>
<p>通常の位置</p>
</div>
<style>
* {
padding: 0;
margin: 0;
}
p {
border: 1px solid #000;
background-color: #def;
width: 300px;
}
.top-left-10px {
top: 10px;
left: 10px;
}
div {
position: relative; /* この要素の左上が基準点 */
}
.absolute {
position: absolute;
}
</style>お気づきかもしれませんが、よくみると移動した要素分の高さが無くなってそのまま上に詰められているのを確認できます。これはこの値を指定することで、他の配置には影響しない独立した配置となるのです。
値：fixed
｢absolute｣に性質は似ていますが、通常はウインドウの表示領域を基準点とし、そこからの距離で位置します。またこちらも他の配置には影響しない独立した配置となります。異なる点としては、位置が固定されて、スクロールしても移動しません。
よく見られる例では、スクロールしても固定され常に表示されているナビメニューや、画面右下に固定して表示されている要素などがあります。
<div>
<p>通常の位置</p>
<p class="fixed bottom-right-0">bottom:0px, right:0pxを指定した要素</p>
<p>通常の位置</p>
</div>
<style>
* {
padding: 0;
margin: 0;
}
p {
border: 1px solid #000;
background-color: #def;
width: 300px;
}
.fixed {
position: fixed;
}
.bottom-right-0 {
bottom: 10px;
right: 10px;
}
</style>取りうる値
| 値 | 説明 |
|---|---|
| static | 初期値。この値のときは top,bottom,left,rightプロパティは適用されません |
| relative | 相対位置への配置となります。スペースは確保されます |
| absolute | 絶対位置への配置となります。また指定した要素はそのスペースが確保されません。親要素がstatic以外の指定している場合、その親要素の左上が基準点になります |
| fixed | absoluteと同様、絶対配置になりスペースも確保されません。異なる点はスクロールしても固定されているのでうごきません |
| sticky | 相対位置と絶対位置を組み合わせたもの。一定の閾値（位置）にくるまでは相対固定で、超えたら、絶対位置として扱われます |
使用例
この絶対配置という性質を利用して、写真の上に見出しがあるサンプルを作成します。画像とテキストを包む<div>要素に基準点となるrelativeを指定します。そこからテキストを表示させたい場所を、 bottom プロパティと left プロパティを使って指定しています。
<div class="relative">
<img src="https://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="300" alt="">
<p class="absolute">この写真は１２月に撮影されました</p>
</div>
<style>
* {
magin: 0;
padding: 0;
}
div {
width: 300px;
background-color: #fff;
padding: 10px;
border: 1px solid #ddd;
}
p {
width: 100%;
color: #fff;
background: rgba(255, 255, 255, 0.3);
text-align: center;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
bottom: 10px;
left: 0px;
}
</style>