要素の配置方法を指定するプロパティです。通常の文書フローからの配置制御が可能です。top、right、bottom、leftプロパティと組み合わせて使用します。
position: static | relative | absolute | fixed | sticky.relative-box {
position: relative;
top: 10px;
left: 20px;
}通常位置から上に10px、左に20px移動した相対配置
.absolute-box {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
}親要素の右上角に配置される絶対配置
.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
z-index: 1000;
}画面上部に固定されるヘッダー
.sticky-sidebar {
position: sticky;
top: 20px;
height: fit-content;
}スクロール時に上から20pxの位置で固定されるサイドバー
.centered-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
}画面中央に配置されるモーダル
absoluteとfixedは元の領域を確保しない。absoluteは最も近い位置指定された親要素が基準、fixedはビューポートが基準。stickyはスクロール時の追従に便利。
absoluteを使う際は、親要素にrelativeを指定することを忘れがち。top/right/bottom/leftを指定しないと効果が見えない場合がある。
全ブラウザ対応（stickyはIE非対応）