Topic

CSS positioning & stacking

Definition

CSS positioning selects how an element participates in layout via position values (static, relative, absolute, fixed, sticky) and how overlapping boxes paint via stacking contexts and z-index.

In simpler words

static is normal flow. relative nudges without leaving the flow. absolute and fixed remove the element from flow and place it against a containing block. sticky sticks while scrolling. z-index only works on positioned (or flex/grid) items in a stacking context.

Position modes, containing blocks, offsets, stacking, and when absolute is the wrong tool for page layout.

Open official example (opens in new tab)

After this you can

Place a badge on a card with relative/absolute and explain why a full page should not be built from absolute coordinates.
Explain the trade-off to a teammate using a small example.
Name at least one common bug pattern for this topic.

Understand CSS positioning & stacking

Position modes, containing blocks, offsets, stacking, and when absolute is the wrong tool for page layout.

Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.

CSS positioning & stacking in code

.card {
  position: relative;
}

.card .badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

Read the example from data and control flow to the resulting UI. Keep the component boundary small.

Apply CSS positioning & stacking

Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.

Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.

Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?

Where bugs hide

Definition

High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.

In simpler words

Each mistake below shows Wrong vs Right code — compare them side by side.

When something misbehaves, match the symptom to a pattern below before rewriting the feature.

Prefer fixing the ownership or update path over adding another Effect or sync step.

Mistake: Absolute without a positioned ancestor

// Wrong
.page { /* position: static (default) */ }
.badge {
  position: absolute;
  top: 0;
  right: 0;
}

// Right
.page {
  position: relative;
}
.badge {
  position: absolute;
  top: 0;
  right: 0;
}

Absolute elements position against the nearest positioned ancestor. Without one, they use the initial containing block.

Mistake: Using absolute for the whole layout

// Wrong
.sidebar { position: absolute; left: 0; width: 240px; }
.main { position: absolute; left: 240px; right: 0; }

// Right
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
}

Absolute layout fights scrolling, wrapping, and content growth. Use flow, flex, or grid for structure.

Mistake: z-index on a static element

// Wrong
.label {
  position: static;
  z-index: 99;
}

// Right
.label {
  position: relative;
  z-index: 99;
}

z-index applies to positioned elements (and flex/grid items), not ordinary static boxes.

Live playground

CSS positioning & stacking sandbox

Change one input at a time and predict the next render.

No interactive demo for course-css-positioning yet — use the code samples and Wrong vs Right examples above.

Keep in mind

Keep the formal definition in mind; it explains which tool belongs where.
Prefer one source of truth over synchronized copies of the same value.
When behavior surprises you, trace: input → update → render → committed UI.
Study the Wrong vs Right examples in “Where bugs hide” before you merge.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. What does position: static mean?

Concept

The element stays in normal flow with top/left/z-index ignored for positioningThe element is removed from flow and fixed to the viewportThe element sticks while scrollingThe element always paints above everything

2. Which pair places a badge in the top-right of a card?

Syntax

.badge{position:static;top:8px;right:8px}.card{float:left} .badge{z-index:99}.badge{display:flex;justify-content:end}.card{position:relative} .badge{position:absolute;top:8px;right:8px}

3. You need a header that stays visible while the page scrolls. Which value?

Practical

position: sticky (with a top offset)position: absolute with a top offsetposition: relative with a high z-indexoverflow: scroll on the body

4. Why can absolute children jump to the wrong place?

Logic

They position against the nearest positioned ancestor; missing one uses a larger containing blockThey always position against their direct parent regardless of its positionThey anchor to the <body> only when a z-index is setThey inherit top/left values from their parent element

5. What does position: fixed do?

Concept

Positions relative to the nearest scrolling ancestor while staying in flowOffsets the element but leaves a placeholder gap in the flowPositions relative to the viewport (typically) and removes the element from normal flowPins the element relative to its parent container

6. Which rule can participate in z-index stacking?

Practical

.a { position: static; z-index: 2; } reliably above neighbors.a { display: block; z-index: 2; } alone.a { float: left; z-index: 2; } always.a { position: relative; z-index: 2; }

7. Best tool for a two-column page shell?

Syntax

Give each column display: inline and a widthStack them with position: absolute and manual offsetsCSS Grid or FlexboxA single <table> cell spanning both columns

8. relative positioning still occupies its original space. Why does that matter?

Logic

The offset element pushes its neighbors by the same amountNeighbors keep the hole in the flow, so layout does not collapse when you offset itIts top/left values shift the surrounding elements tooThe reserved space disappears once you set top or left

9. What is a stacking context in simple terms?

Concept

A global ordering where every z-index on the page competes directlyThe order in which the browser downloads and applies stylesheetsA local painting layer where z-index values compare among descendantsA layer created automatically by any element with a margin

10. Which sticky header snippet is complete enough to stick?

Practical

.h { position: sticky; }.h { position: relative; top: 0; }.h { position: fixed; sticky: true; }.h { position: sticky; top: 0; }

11. What must .card have so the badge anchors to it?

Conceptintermediate

.card { /* ? */ }
.badge { position: absolute; top: 8px; right: 8px; }

position: static, the default, which is enough to anchor childrenposition: relative, to become the positioned ancestordisplay: block so it can contain the badgea high z-index so the badge stays inside

12. Why does this header not stick?

Syntaxadvanced

.header { position: sticky; }

sticky needs an inset like top: 0 to activatesticky also requires a positioned ancestor to anchor toThe header needs an explicit height for sticky to workThe parent must be display: flex to enable sticky

13. How does this button behave?

Practicaladvanced

.fab { position: fixed; bottom: 16px; right: 16px; }

It scrolls away with the page contentIt stays fixed to the viewport and is removed from normal flowIt stays in normal flow and pushes its siblings asideIt anchors to its parent container, not the viewport

14. Why might z-index have no effect here?

Logicintermediate

.a { z-index: 10; }

z-index applies to positioned elements; add position: relativez-index values must be below 10 to take effectz-index needs a matching z-index on the parent to workz-index only affects elements with opacity below 1

15. Why does the tooltip anchor to the page, not its card?

Conceptadvanced

/* card has no positioning */
.tooltip { position: absolute; top: 0; left: 0; }

absolute always anchors to the immediate parent elementWith no positioned ancestor it uses the initial containing blocktop and left are ignored unless the parent is a flex containerIt anchors to the nearest ancestor that has a margin set

Checking your session…