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.

This is a Conditional Value field. Such fields allow you to specify values directly OR use a Formula to specify a value. Conditional values are useful for specifying different values for changing situations, such as varying device types or screen sizes.

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