iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
The CSS position property decides two things about an element: whether it keeps its space in the normal layout flow, and which element or scrolling context its offsets are measured from. relative keeps the space and shifts the element visually. absolute removes it from the flow and measures it from a containing block. fixed measures it from the viewport in most cases. sticky behaves like normal content until you scroll past a threshold, then holds its position within its container. static, the default, ignores offsets altogether.
Two questions that explain every position value
Before memorising the five values, ask two questions about any positioned element:
- Does it keep its place in normal flow? If yes, surrounding content still lays out as if the element were there. If no, the element stops reserving space and neighbours move into the gap.
- What determines where it sits? The answer might be its own original spot, its nearest positioned ancestor, the browser viewport, or the nearest ancestor that scrolls.
Those two answers are enough to predict most beginner behaviour. The reference for the full set of rules is the MDN position property reference.
The five values at a glance
| Value | Stays in normal flow? | What the offsets (top, right, bottom, left) are measured from | Does scrolling change where it appears? | Needs an inset to do anything? | Stacking behaviour |
|---|---|---|---|---|---|
static |
Yes | Offsets are ignored | No | Not applicable | Does not create a stacking context on its own |
relative |
Yes; its original space is kept | Its own original position | No | No; without offsets it does not move | Creates a stacking context when z-index is not auto |
absolute |
No; its space is released | Nearest positioned ancestor, or the initial containing block if there is none | Moves with its containing block, not with the viewport | No; without offsets it stays at its static-position spot | Creates a stacking context when z-index is not auto |
fixed |
No | The viewport, unless an ancestor with a non-none transform becomes the containing block |
No; it stays put while the page scrolls | No; without offsets it stays at its static-position spot | Always creates a stacking context |
sticky |
Yes, until the threshold is crossed | Its nearest scrolling ancestor, while staying inside its containing block | Yes, by design | Yes; at least one inset on the sticking axis must be non-auto |
Always creates a stacking context |
The most useful contrasts for a beginner are relative against absolute, then fixed against sticky. The sections below cover each value with a small example.
Each value, with a small example
static: the default
Every element starts as static. It follows normal flow, and top, right, bottom and left have no effect. You only need to write it when you are undoing a value set earlier in the cascade.
relative: shift without losing space
Apply an offset and the element moves, but the space it started in stays reserved:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.middle {
position: relative;
top: 1rem;
}The middle block appears 1rem lower, yet the block below stays exactly where it was, so the shifted block overlaps its top edge. The main beginner use of relative is not the shift itself. It is marking a parent as the reference point for an absolutely positioned child.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11absolute: placed against a containing block
absolute removes the element from flow, so it no longer pushes its neighbours. Its offsets are resolved against its containing block, which is the nearest ancestor whose position is not static. If no ancestor qualifies, the initial containing block (the page’s root box) is used. This is why the value is easy to misread: the direct parent is not automatically the reference. The rule is covered in the MDN positioned layout guide, which explains containing blocks and stacking contexts in more depth.
fixed: anchored to the viewport
A fixed element stays in the same place on screen while the page scrolls. A typical back-to-top control looks like this:
.back-to-top {
position: fixed;
right: 1rem;
bottom: 1rem;
}There is one exception that catches people out. If an ancestor has a transform other than none, that ancestor becomes the containing block instead of the viewport, and the button then moves with that ancestor. Check for transforms on parent containers when a fixed element behaves unexpectedly.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
sticky: normal until a threshold, then held in place
A sticky element is laid out normally until it would cross an inset threshold, such as top: 0. From that point it stays pinned against its nearest scrolling ancestor, but it never leaves its containing block:
.section-title {
position: sticky;
top: 0;
}The heading sticks as its section scrolls past the top of the window, then scrolls away when its section ends. The threshold is essential. Without a non-auto inset on the axis where it should stick, the element does nothing special.
Relative versus absolute: a worked example
Use this short exercise to see the difference in the browser.
- Create three stacked blocks, each with a height and background colour, such as
<div class="a">,<div class="b">and<div class="c">. - Add
position: relative; top: 1rem;to.b. Block B moves down, and block C stays put, so the two overlap. - Remove that rule. Add a wrapper around a short paragraph with
position: relative;, then place a small badge inside it withposition: absolute; top: 0; right: 0;. - Observe the result. The badge sits in the wrapper’s top-right corner, and the paragraph text no longer makes room for it.
Step 2 shows the shift without space loss. Step 4 shows the containing block and the release of layout space. Together they are the core of the “how do I properly layer things?” question that most beginners ask.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Layering with z-index and stacking contexts
z-index orders elements only within a stacking context. A large number does not help if the element sits inside an ancestor stacking context that is itself below a sibling. The following rules decide when a stacking context is created:
Best Value
fixedandstickyalways create one.relativeandabsolutecreate one whenz-indexis set to anything other thanauto.
When a z-index value seems ignored, look at the nearest ancestor that creates a stacking context, and set the order there instead of raising the number on the element itself.
When sticky does not stick
Work through these checks in order. The element’s own rules come last, because the cause is usually elsewhere.
Quick Recap
- Confirm the inset. The sticking axis needs a value other than
auto, usuallytop: 0for a header or heading. - Find the scrolling ancestor. An ancestor with
overflow: hidden,scrollorautocan become the scroll mechanism, even if it is not the element you expected to scroll. Sticky then reacts to that ancestor, so the page scroll may not trigger it. - Check the containing block. A sticky element can only move within its parent. If the parent is no taller than the element, there is no room for it to stick, and nothing appears to happen.
- Only then change the element. Adjust the inset, the
z-index, or the element’s own styling once the ancestors have been ruled out.
These checks follow the rules in the MDN position property reference, which is the authoritative description of the sticky and fixed behaviour used here.
Where to go next
Practise with the three-block exercise above, then build a small page with one sticky heading and one fixed control. Those two examples cover most of what beginners need before moving on to flexbox and grid, which handle many layouts without any positioning at all.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
