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 thetop,left,bottom, andright physical properties, theirinset-block-start,inset-block-end,inset-inline-start, andinset-inline-end flow-relativelogical property equivalents, and theinset-block,inset-inline, andinset 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. Theinline 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'swriting-mode,direction, andtext-orientation.
The interpretation of inset properties depends on the value of theposition property. Whenposition: absolute is set, they represent insets from thecontaining block oranchor element. Withposition: relative, they represent insets from the box's default margin edge position. Withsticky, they represent insets from thescroll container edge. Thefixed value is similar toabsolute, except the element is positioned and sized relative to its fixed positioning containing block, which is often the viewport.