positionについて解説
- position とは
- position の指定方法
- position: static; の指定方法と表示
- position: relative; の指定方法と表示
- position: absolute; の指定方法と表示
- position: fixed; の指定方法と表示
- 今回のまとめ
background-position とは
position は要素の位置を決めるプロパティです。
position の指定方法
position を指定するときによく使う値は下記の4つです。
| キーワード | 内容 |
|---|---|
| static | 初期値 |
| relative | 現在の位置を基準に相対的な位置を決める |
| absolute | 親要素を基準に絶対的な位置を決める |
| fixed | 要素を決まった位置に固定する |
また、要素の位置を指定するときに使える値は下記の4つです。
| キーワード | 内容 |
|---|---|
| top | 上からの距離 |
| right | 右からの距離 |
| bottom | 下からの距離 |
| left | 左からの距離 |
それではそれぞれの指定方法と表示を見ていきましょう。
position: static; の指定方法と表示
position: static; は初期値になります。
指定するときは下記の2つのポイントを覚えておきましょう。
- top や left などを指定しても効かないため要素を上下左右に動かすことができない
- z-index が効かない
それでは指定方法と表示を見ていきましょう。
<div class="position-static"></div>.position-static {
position: static;
z-index: 1;
top: 30px;
left: 50px;
background-color: red;
width: 200px;
height: 200px;
}上記のように position: static; を指定すると top: 30px; や left: 50px; などの要素を上下左右に動かす指定は効かないことがわかります。
また、z-index を 1 で指定していますが、効かないことがわかります。 (※検証ツールで確認)
position: relative; の指定方法と表示
position: relative; を指定すると現在の位置を基準に相対的な位置を決めることができます。
ちなみに「relative」を日本語にすると「相対的」という意味になります。
指定するときは下記の2つのポイントを覚えておきましょう。
- top や left などを指定して要素を上下左右に動かすことができる
- z-index が効く
それでは指定方法と表示を見ていきましょう。
<div class="position-relative"></div>.position-relative {
position: relative;
z-index: 1;
top: 30px;
left: 50px;
background-color: red;
width: 200px;
height: 200px;
}上記のように position: relative; を指定すると top: 30px; や left: 50px; などの要素を上下左右に動かす指定が効いています。
また、z-index を 1 で指定していますが、こちらも効いていることがわかります。 (※検証ツールで確認)
position: absolute; の指定方法と表示
position: absolute; を指定すると親要素を基準に絶対的な位置を決めることができます。
ちなみに「absolute」を日本語にすると「絶対」という意味になります。
指定するときは下記の3つのポイントを覚えておきましょう。
- relative とセットで使う (※relative は親要素に指定)
- top や left などを指定して要素を上下左右に動かすことができる
- z-index が効く
それでは指定方法と表示を見ていきましょう。
<div class="position-relative">
<div class="position-absolute"></div>
</div>.position-relative {
position: relative;
z-index: 1;
width: calc(100% - 50px);
height: calc(100% - 50px);
top: 50px;
left: 50px;
background-color: red;
}
.position-absolute {
position: absolute;
z-index: 1;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: blue;
}上記のように position: absolute; を指定するときは親要素に position: relative; を指定します。
今回は relative が指定されている親要素(赤背景の部分)を基準にして top: 30px; と left: 30px; が効いていることがわかります。
また、z-index を 1 で指定していますが、こちらも効いていることがわかります。 (※検証ツールで確認)
position: fixed; の指定方法と表示
position: fixed; を指定すると画面の決まった位置に要素を固定させることができます。
指定するときは下記の3つのポイントを覚えておきましょう。
- 画面の決まった位置に固定されるため、画面をスクロールすると要素が追従する
- top や left などを指定して要素を上下左右に動かすことができる
- z-index が効く
それでは指定方法と表示を見ていきましょう。
fixed については画面上に要素が固定される関係上 CodePen で確認できればと思います。
上記のように position: fixed; を指定すると画面の決まった位置に要素を固定させることができ、画面をスクロールすると要素が追従します。
今回は top: 0; と left: 0; に合わせて widht: 100%; を指定しているため、画面上部に要素が固定されます。
また、z-index を 1 で指定していますが、こちらも効いていることがわかります。 (※検証ツールで確認)
今回のまとめ
この記事では position について解説しました。
position は要素の位置を決めるプロパティです。
position を指定するときによく使う値は static, relative, absolute, fixed の4つです。
この記事を見て使い分けられるようになると嬉しいです。
最後までお読みいただきありがとうございます。