position CSS property is used to specify the positioning method for an element within its containing parent or the document. It determines how an element is positioned in relation to its normal position in the document flow.
position property accepts several values:
static: This is the default value. The element is positioned according to the normal flow of the document. It is not affected by the
relative: The element is positioned relative to its normal position. By using the
leftproperties, you can adjust its position. Other elements on the page are not affected by the element’s position change.
absolute: The element is positioned relative to its nearest positioned ancestor, or the containing block if no positioned ancestor exists. It is removed from the normal document flow, and other elements are positioned as if it does not exist.
fixed: The element is positioned relative to the browser window, regardless of scrolling. It remains in the same position even if the page is scrolled.
sticky: The element is positioned based on the user’s scroll position. It behaves like
relativeuntil the element reaches a specified threshold, at which point it becomes
fixed. It sticks to the specified position even when the page is scrolled.
Here’s an example:
In this example, the
.container class sets the
position property to
relative. It adjusts the element’s position 20 pixels down from its normal position and 50 pixels to the right.
By using different values for the
position property, you can control how an element is positioned within its layout and interact with other elements on the page.
position property is commonly used to create complex and dynamic layouts, implement scrollable elements, or fix elements in specific positions. It provides flexibility and control over the positioning of elements in CSS.