What is CSS positioning?
The CSS `position` property is used to specify the placement of an element within a document. By combining the `left`, `right`, `top`, `bottom`, and `z-index` properties, it determines the exact positioning of the element on a web page.
CSS Positioning Values
| Position Value | Description | Example |
|---|---|---|
| static | Default positioning; follows the normal document flow. The default value for the `position` property is `static`. When an element is positioned as `static`, it follows the normal flow of the document. In this positioning mode, the `left`, `right`, `top`, `bottom`, and `z-index` properties have no effect on the element’s placement. |
Static Element
|
| relative | Positioned relative to its normal position. Elements with `position: relative` maintain their position within the normal flow of the document. However, unlike static elements, the `left`, `right`, `top`, `bottom`, and `z-index` properties have an impact on the positioning of the element. When `position: relative` is applied, the element is offset from its default position based on the values specified for the `left`, `right`, `top`, and `bottom` properties. This offset is calculated relative to the element’s original position, creating the desired positioning effect. |
Relative Element
|
| absolute | Positioned relative to its nearest positioned ancestor.
When an element has `position: absolute`, it is positioned relative to its closest parent element that has a positioning value other than `position: static`. In this case, the element is removed from the normal document flow, and other elements will act as if the element does not exist in the layout, creating no space for it. The final position of the element is determined by the values specified for the `left`, `top`, `bottom`, and `right` properties. Important to note that the closest positioned ancestor element serves as the reference for positioning. If there is no positioned ancestor, the element will be positioned relative to the `<html>` element. Remember, for `position: absolute` to work as intended, the parent element must have a position value other than `position: static`. Otherwise, the element’s positioning will be relative to the next ancestor element that has a non-static position or, if none is found, to the `<html>` element. |
Absolute Element
|
| fixed | Positioned relative to the viewport; remains fixed even when scrolling.
Fixed position elements are similar to absolutely positioned elements. They are also removed from the normal flow of the document. But unlike absolutely positioned element, they are always positioned relative to the
|
Fixed Element
|
| sticky | Acts like a combination of relative and fixed; becomes fixed within a specific scroll range. `position: sticky` combines characteristics of both `position: relative` and `position: fixed`. Initially, it behaves like a relatively positioned element, following the normal flow of the document. However, once the user scrolls to a specific point (the “sticky point”), it transitions into behaving like a fixed element, maintaining its position in the viewport as the user continues scrolling. This creates a unique effect where the element appears to “stick” to a particular position on the screen, providing a versatile and dynamic layout behavior. |
Sticky Element
|