要素の配置方法を指定するプロパティです。通常の文書フローからの配置制御が可能です。top、right、bottom、leftプロパティと組み合わせて使用します。
position: static | relative | absolute | fixed | sticky| static | position: static |
| relative | position: relative |
| absolute | position: absolute |
| fixed | position: fixed |
| sticky | position: sticky |
.element {
position: relative;
top: 0px;
left: 0px;
}.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を指定しないと効果が見えない場合がある。
AIはposition: absoluteを使うとき基準となる祖先（position: relative等）の指定を忘れた壊れコードを出しがちです。またstickyは「親にoverflow: hidden等があると効かない」「top等の閾値指定が必須」という2大条件をよく落とします。
このposition: stickyが効かない原因を、祖先のoverflowと閾値指定の観点から調査して
カードの右上にバッジを絶対配置したい。基準要素の指定を含めて正しく実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。