CSS Display and Positioning: block, inline, static, relative, absolute, fixed, sticky and z-index

What display and position actually control

In CSS, display decides how a box participates in the flow of the page — a block box starts on a new line and takes the full available width, while an inline box flows along a line of text with its neighbors. position is a separate decision: it controls what an element's top, right, bottom, and left offsets are measured against. The five values are static, relative, absolute, fixed, and sticky, and only the last four count as positioned — which is the reason z-index silently does nothing on a default element.

Block vs. inline

Block-level elements like <div>, <p>, and <h2> honor width, height, and margins on all four sides. A non-replaced inline element like <span>, <a>, or <strong> lives inside a line box, so it ignores width, height, and top/bottom margins. Left and right padding and margin still apply. display: inline-block is the middle ground: the box stays on the line with its neighbors but accepts width, height, and vertical margins like a block.

The five position values

Two footnotes on that table. For absolute and fixed, an ancestor can also become the containing block without any position at all — a transform, filter, or backdrop-filter other than none is enough, which is covered in the deep dive below. And relative is the most misread of the five: nudging an element with top: 20px moves only its painted box, while the page still reserves the space it would have taken as static, so no sibling shifts. sticky needs a threshold — at least one non-auto inset value on the axis you want it to stick on, such as top: 0. Without one, it behaves on that axis exactly like relative and never sticks.

z-index and stacking contexts

z-index applies to positioned elements and to flex and grid items; on an ordinary static element that is neither, it is ignored. With no z-index at all, positioned elements paint above non-positioned ones, and among positioned siblings the one later in the HTML wins. The real gotcha is the stacking context: a positioned element with any z-index other than auto creates one, and so do opacity below 1, a transform, and isolation: isolate. Inside a stacking context, children are sealed in — the whole subtree is painted as one unit at the parent's level, so a child's z-index: 9999 cannot climb past an element outside it.

Read the full WGU D276 Web Development Foundations study guide for the wider CSS picture, or jump straight into more D276 practice questions. Try the six below first.

A worked example: card, badge, and sticky header

Picture a product card with a "Sale" badge in the corner, inside a page with a header that should stick while you scroll. Here is the shape of it:

.card   { position: relative; padding: 1rem; }
.badge  { position: absolute; top: 8px; right: 8px; }
.site-header { position: sticky; top: 0; z-index: 10; }

Three separate decisions are doing the work. The .card is given relative purely so it becomes a containing block — it is not offset at all, and that is the most common legitimate use of relative in real code. The .badge then measures from the card's padding box, so top: 8px is 8px inside the padding edge, not inside the content. The header keeps its space in flow and pins once the scroll position reaches its top: 0 threshold.

Mistakes people actually make

• Forgetting the anchor. An absolutely positioned child with no positioned ancestor falls all the way back to the initial containing block, and usually lands in the top corner of the page instead of inside its card.
• A sticky element inside a container with overflow: hidden, scroll, or auto. MDN notes that a sticky element sticks to its nearest ancestor with a scrolling mechanism even when that ancestor is not the thing actually scrolling — so the element appears to do nothing. This is one of the most common reasons "sticky is broken," alongside a parent that is no taller than the sticky element itself.
• Escalating z-index. When a modal will not cover a dropdown, bumping it to 999999 almost never helps. Find the ancestor that created a stacking context — often an opacity: 0.99, a transform, or a nearby z-index — and fix the layer boundary instead.
• Expecting vertical padding on inline elements to move things. Padding on a <span> does render, but it overlaps the lines above and below instead of pushing them apart. Use inline-block when you need the space.

How to reason about the tricky cases

When something is in the wrong place, ask what is my containing block? Walk up the DOM until you hit an ancestor with a non-static position. For absolute and fixed elements, MDN also lists ancestor properties that form a containing block on their own: a filter, backdrop-filter, transform, perspective, rotate, scale, or translate other than none; a contain value of layout, paint, strict, or content; a qualifying will-change; and content-visibility: auto. That is why a position: fixed element inside a transformed parent stops tracking the viewport and starts tracking that parent. MDN's containing block reference lists every trigger.

When something is on the wrong layer, ask are these two elements even in the same stacking context? If they are not, their z-index numbers were never being compared in the first place. Reading the tree from the root down, one context at a time, turns almost every layering mystery into an obvious answer.