女性向けエンジニアスクール
3秒でわかる
CSS で要素をどの基準に対して配置するかを決めるプロパティ。通常の流れから外して重ねたり画面に固定したりするために使います。
もう少し詳しく
どういうものか
position は、要素の配置をどの基準で決めるかを指定する CSS のプロパティです。既定値は static で、この場合は上から順に積み上がる通常の流れに従い、top や left の指定は効きません。値を変えると、この流れから外れたり、ずれの基準が変わったりします。
主な値は下のとおりです。
| 値 | 基準になるもの | 流れの中の場所 |
|---|---|---|
| static | 指定できない | そのまま |
| relative | 自分の本来の位置 | 元の場所を確保したままずれる |
| absolute | 直近の位置指定された祖先 | 流れから抜ける |
| fixed | 表示領域 | 流れから抜けてスクロールしても動かない |
| sticky | スクロール位置に応じて切り替わる | 途中まで流れに従う |
なぜ必要か
通常の流れだけでは、要素を重ねたり、スクロールしても動かない場所に置いたりできません。画面上部に貼り付くヘッダー、画面中央に浮かぶモーダル、押した要素の真下に開くメニュー、画像の右上に付くバッジ。こうした表現はいずれも position が担当します。
具体例
親を基準にして、子を右上に置く定番の組み合わせです。
.card {
position: relative; /* 基準をここに作る */
}
.card .badge {
position: absolute;
top: 8px;
right: 8px;
}
.header {
position: sticky;
top: 0;
z-index: 10;
}つまずきやすいところ
absolute を指定したのに画面の隅へ飛んでいく、という現象が最も多い詰まり方です。原因は、基準にしたい祖先に position を付け忘れていることです。祖先に位置指定がひとつも無いと、基準は最上位の要素になります。上の例のように、親へ relative を置いてください。
sticky が効かない場合は、親に overflow の指定が入っていないか、top などのずれ幅を書き忘れていないかを疑います。sticky は基準となる方向の指定が無いと動きません。
重なり順が思いどおりにならないときは z-index を疑いがちですが、z-index は position が static のままの要素には効きません。
覚え方
relative は「自分の場所を残したままずれる」、absolute は「場所を空けずに親の上へ浮く」と対にして覚えます。absolute を使うときは、まずどこを基準にしたいかを決め、その要素へ relative を置く、という順番で考えると迷いません。
