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
と似ていますが、この要素は固定位置指定の包含ブロック(ふつうはビューポート)に対して相対的に位置指定され、サイズが指定されます。
関連情報
- レイアウトと包含ブロック
- CSS 位置指定レイアウトモジュール
- CSS 論理プロパティと値モジュール
- CSS アンカー位置指定モジュール