Inset properties

In CSS, inset properties control positioned elements' location by specifying offsets from the elements' default positions. There are physical, logical, and shorthand inset properties.

The inset properties include the top, left, bottom, and right physical properties, their inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end flow-relative logical property equivalents, and the inset-block, inset-inline, and inset shorthands.

Physical properties reference specific physical sides of an element. Logical properties use directional keywords relative to the block and inline axes. Block axis refers to the axis that defines the stacking order of elements in a block layout. The inline axis is perpendicular to the block axis, representing the direction along which inline content like text flows within a block. The mapping depends on the element's writing-mode, direction, and text-orientation.

The interpretation of inset properties depends on the value of the position property. When position: absolute is set, they represent insets from the containing block or anchor element. With position: relative, they represent insets from the box's default margin edge position. With sticky, they represent insets from the scrollport edge. The fixed value is similar to absolute, except the element is positioned and sized relative to its fixed positioning containing block, which is often the viewport.