CSS レッスン7
position
static、relative、absolute、fixed、stickyで要素の配置方法を学ぼう
positionプロパティの種類
positionプロパティは要素の配置方法を決定します。top、right、bottom、leftと組み合わせて使います：
static- デフォルト。通常の流れに従うrelative- 元の位置を基準にずらす（元のスペースは保持）absolute- 最も近いposition指定済みの親要素を基準に配置fixed- ビューポート（画面）を基準に固定配置sticky- スクロール位置に応じてrelativeとfixedを切り替えz-index- 要素の重なり順を制御
relativeとabsolute
relativeは元の位置からのずれ、absoluteは親要素からの絶対位置で配置します。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Previewstickyとz-index
stickyはスクロールに追従し、z-indexは要素の重なり順を決めます。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview実用例：カード上のバッジとオーバーレイ
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview自由に試してみよう
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview