top、right、bottom、leftを一括で指定できる短縮プロパティです。position: absoluteやfixedと組み合わせて使用します。
inset: <top> <right> <bottom> <left>| inset-0 | inset: 0 |
| inset-x-0 | inset-inline: 0 |
| top-0 | top: 0 |
| -top-4 | top: -16px |
一般形: inset-{n} / top-{n} / bottom-{n}(n×4px)
任意値: inset-[10%]
inset: 20px;全方向から20px
inset: 10px 30px;上下10px、左右30px
inset: auto 10px 10px auto;右10px、下10px(左上は自動)
モーダルやオーバーレイを親要素いっぱいに広げたい時、inset: 0;が便利。コードが短くなり読みやすい。
position: static(デフォルト)では効果がない。position: absolute、fixed、relative、stickyと組み合わせて使う。
insetはtop/right/bottom/leftの一括指定で、値の順序もmarginと同じ時計回りです。inset: 0による全面配置(オーバーレイの定番)が最頻出ですが、position指定がないと何も起きない点はtop等と同じです。書字方向対応が必要ならinset-inline/inset-blockという論理版があります。
モーダルの背景オーバーレイをposition: fixed + inset: 0の定番パターンで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。