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は親要素からの絶対位置で配置します。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
13 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
stickyとz-index
stickyはスクロールに追従し、z-indexは要素の重なり順を決めます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
13 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
実用例：カード上のバッジとオーバーレイ
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
13 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
自由に試してみよう
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
5 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。