The CSS position property is used to specify where an element is displayed on the page. When paired with the the top, right, bottom, and left CSS properties, the position property determines the final location of the element.
The position property can take one of several values: static, relative, fixed, absolute, and sticky. Let’s break down each value in detail with examples to see how each value affects a page element.
- static
- relative
- fixed
- absolute
- sticky
static: Static is the default position for HTML elements. Elements with position: static are positioned based on the normal flow of the page, as you would expect them to be without any CSS styling. They are not affected by the top, right, bottom, or left properties. Z-index also does not apply to static elements.
In the example below, only div 2 is assigned position: static. However, you’ll see that its placement in the document is the same as if it did not have this property. You can delete the position: static from the CSS and the display will not change
relative: When assigned position: relative, an element follows the render flow of the page, but will be shifted relative to its initial position.
To determine the amount of offset, you set values for the top, right, bottom, and/or left properties. Surrounding elements won’t be affected, but there will be space where the repositioned element would have been (in static positioning).
In this example, I’ve offset div 2 by 30 pixels down (with the top property) and 30 pixels to the right (using the left property). The repositioned div does not affect the position of surrounding elements.
fixed: Elements with position: fixed do not adhere to the normal render flow of the document. Instead, fixed elements are positioned relative to the viewport — in other words, the part of the document that is currently visible in the browser.
Fixed elements do not move when the user scrolls, and, unlike relative, they do not leave a blank space where the element would have been positioned. You can use the top, right, bottom, and left properties to set the fixed element's final position.
Here, div 2 is offset by 30 pixels top and 30 pixels left, like in the last example. However, this time it is positioned relative to the viewport. Notice that there is no space where the element would have been on the page.
absolute: With position: absolute, an element ignores the normal document flow. However, instead of being positioned relative to the viewport (like with position: fixed), it’s positioned relative to the nearest positioned ancestor (a positioned ancestor is any element with a position value besides static, the default).
Here, div 2 is placed inside a container div (in gray) and positioned relative to the container, since the container is the nearest ancestor element of div 2.
CSS Position: Relative vs. Absolute When an element's computed position value is defined as fixed or absolute, it assumes the absolute CSS position. When the computed position value is relative, it assumes the relative CSS position. In both cases, the top, right, bottom, and left properties specify the offsets from the element's position.
While relative-positioned elements remain in the flow of the document, absolute-positioned elements are taken out of the way of the other elements on the page. All other elements are positioned out as if the absolute-positioned element were not there.