An Overview of CSS Positioning Schemes
In this post, we’ll learn about positioning schemes, which we can use to change an element’s position.
The position property
position property allows us to specify a positioning scheme. It accepts the values:
static is the default value; an element with this value set is called a statically-positioned or non-positioned element. An element using a value other than
static is called a positioned element.
position works with the inset properties
left to control the precise location of a positioned element.
Let’s take a closer look at each of these positioning scheme values.
static is the default value for
position, and it places the element in the normal flow of the document. Inset properties do not affect the element’s position.
The element gets placed in the normal flow of the document like
static and inset properties offset it relative to itself. This offset does not affect the layout of other elements, and the element takes up space as if it were statically positioned. The offset acts as a cosmetic effect.
absolute removes the element from the normal document flow and positions it relative to its nearest positioned ancestor. If there is no positioned ancestor, the element gets positioned relative to the initial containing block (the containing block of the root
<html> element, a box the size and position of the viewport).
No space gets made for absolutely-positioned elements in the page layout; other elements act as if they do not exist.
Fixed elements behave similarly to absolutely-positioned elements, but they are always positioned relative to the initial containing block. This causes the element to appear fixed on the page, regardless of scrolling.
Note that an element using the
transform properties or the
will-change: transform declaration becomes the containing block of any
fixed descendants, causing the
fixed elements to act absolutely-positioned. In other words, elements with these properties cannot have
sticky causes the element to act like a relatively-positioned element until it reaches a threshold, at which point it becomes fixed relative to its nearest scrollport (i.e., the closest ancestor that manages overflow) until its container goes out of view. Space is made for the element in the layout, even when it acts fixed.
The threshold is specified by the inset properties: for example, a
sticky element with
top: 10px would be relatively-positioned until the element is 10 pixels from the top of its nearest scrollport. Once that threshold is met, the element is fixed 10 pixels from the top of its nearest scrollport.
In this example, the box sticks to the viewport but is only sticky while its container is in view:
Positioning in the wild
I found it helpful to understand positioning by seeing its use in the real world. Here are a few examples of positioning types that I found.
Absolute: Facebook notification badge
This notification badge on Facebook uses absolute positioning to appear above the news icon:
Fixed: StackOverflow header
Headers commonly use fixed positioning to stick to the top of the page when the user scrolls:
Sticky: iPhone product page
Both the white “iPhone 13” header and product image on this page are sticky:
I couldn’t find a good example for relative positioning. Please suggest one!
Come connect with me on LinkedIn, Twitter, and GitHub!
If you found this post helpful, please consider supporting my work financially:☕️Buy me a coffee!