Inset properties (インセットプロパティ)

CSS において、インセットプロパティ (inset properties) は、要素の既定の位置からのオフセットを指定することで、位置指定された要素の位置を制御します。物理的、論理的、一括指定のインセットプロパティがあります。

インセットプロパティには、top, left, bottom, right の物理プロパティ、フローに基づく同等物である inset-block-start, inset-block-end, inset-inline-start, inset-inline-end論理プロパティ、そして一括指定の inset-block, inset-inline, inset が含まれます。

物理的プロパティは、要素の特定の物理的な辺を参照します。論理プロパティは、ブロック軸とインライン軸に基づく、方向キーワードを使用します。ブロック軸は、ブロックレイアウト内の要素の積み重ね順序を定義する軸を指します。インライン軸はブロック軸に垂直で、ブロック内のテキストなどのインラインコンテンツが流れる方向を表します。対応付けは、要素の writing-mode, direction, and text-orientation によって異なります。

インセットプロパティの解釈は、position プロパティの値によって異なります。position: absolute が設定されている場合、包含ブロックまたはアンカー要素からの内部余白を意味します。position: relative が設定されている場合、ボックスの既定では、マージン辺の位置からの内部余白を意味します。sticky が設定されている場合、スクロールコンテナーの辺からの内部余白を意味します。fixed の値は absolute と似ていますが、この要素は固定位置指定の包含ブロック(ふつうはビューポート)に対して相対的に位置指定され、サイズが指定されます。

関連情報