Position

  • The position property specifies the type of positioning method used for an element.

  • Common values:

    • static: Default value; element is not positioned, and it is rendered in the normal flow.

    • relative: Positioned relative to its normal position.

    • absolute: Positioned relative to the nearest positioned ancestor.

    • fixed: Positioned relative to the browser window, and doesn't move when the page is scrolled.

    • sticky: Toggles between relative and fixed, based on the user's scroll position.

    Position Values

  • You can also adjust individual position offsets using the following controls. These appear once you select a position value other than 'static'

  • Positioning can alter element stacking, affecting the rendering order.

  • Influences the offset properties: top, right, bottom, and left.

  • Important for layout design, providing control over element placement.

Possible Values (for offset)

Value
Units
Description

Any Number

px

Specifies the offset in pixels.

Any Number

%

Specifies the offset as a percentage of the containing block.

Any Number

rem

Specifies the offset relative to the font size of the root element.

Any Number

vw

Specifies the offset as a percentage of the viewport's width.

Any Number

vh

Specifies the offset as a percentage of the viewport's height.

N/A

auto

The browser calculates the offset automatically.

N/A

unset

Resets the property to its natural value or inherits from parent. It is like undoing the position.

Examples

  1. Let's demonstrate positioning with an example: a parent container and its child container. We set the parent container's position to relative, and the child's to absolute, with top: 35% and left: 30%

Parent Container Position's Settings
Child Container Position's Settings
Result

PreviousPositioning TabNextz-index

Last updated