Positioning

position

Default: relative

Defines the positioning method of a block.

relative — the element's natural position is taken as the starting point. The properties top, right, bottom, and left determine the offset from this starting position.

absolute — the position relative to the container's boundaries is taken as the starting point. The properties top, right, bottom, and left define the offset from this starting position and possibly the size of the block.

top, right, bottom, left: number | percent

Determine the offset from the starting position. This can be an absolute value in pixels or a percentage relative to the container's dimensions.

When position = 'relative', the starting position is the element's natural position. The offset is then set using one or two coordinates: left or right horizontally, and top or bottom vertically. The left property takes precedence over right if both are set, and top takes precedence over bottom.

In the case of position = 'absolute', the starting position is taken as the position relative to the container's boundaries. The properties top, right, bottom, and left define the offset from this starting position. If left is set alongside right, these properties determine the block's width, while top paired with bottom determines its height.

In the example with position = 'relative', the natural position of the block is the space immediately after the text that precedes it. Thus, the properties top, right, bottom, and left define the offset from this natural position.