Positioning in CSS

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.

CSS Position Values

1. 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.

   

2. 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.

   

3. 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.

   

4. 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.

   

5. sticky

   Elements with position: sticky are positioned depending on the user’s scroll. Depending on how far the user has scrolled down the page, a sticky element behaves like a relative element until the viewport meets a specified position. Then it becomes fixed in a spot and appears to “stick” to the page as the user scrolls.

   In this example, scroll down and watch as div 2 goes from behaving like a relative element to a fixed element when it reaches the position top: 0 and “sticks” to the top of the viewport.

   

Sticky elements always create a stacking context.

Keep in mind that using the Bootstrap CSS framework will provide you with these five values, as well as three additional classes for controlling the position of an element: fixed top, fixed bottom, and sticky top. If you're interested, you can check out the code and examples for each of these Bootstrap CSS position property classes.

Thanks for reading this blog! 😊