📑

Positioning & Layers

Escape normal flow. Learn position: relative/absolute/fixed/sticky, z-index, stacking contexts, and pseudo-element tooltips — the toolkit behind modals, dropdowns, and sticky headers.

Prerequisites:🧩Display & Layout

Why Positioning Matters

Modals. Sticky headers. Tooltips. Dropdowns. Floating chat bubbles. None of these are possible with normal flow alone — positioning is the CSS escape hatch that builds them.

static & relative

The default is static — elements sit where flow puts them. With relative you can nudge an element a bit, while leaving its original space reserved.

position: absolute — Out of Flow

Absolute removes an element from normal flow and pins it to its nearest positioned ancestor. The result: badges, tooltips, dropdowns, and overlays.

position: fixed — Pinned to the Viewport

Fixed elements ignore scrolling. They are how floating chat bubbles, toolbars, and 'back to top' buttons stay in place no matter where you are on the page.

position: sticky — In Flow Until It Sticks

Sticky is the hybrid: an element flows normally until it would scroll out of view, then it pins to a viewport edge. Section headers, table headers, and sticky filters all use this.

z-index: Who Sits on Top?

When elements overlap, z-index decides which one wins. Predict the result, learn the rules, and use the smallest values that solve the problem.

When z-index 'Doesn't Work'

Sometimes you set z-index: 9999 and the element STILL hides behind another. The cause is almost always a stacking context. Learn what they are and how to spot the trap.

::before & ::after — Build a Tooltip

Pseudo-elements let you generate decoration in CSS without adding HTML. Combine them with absolute positioning to build a tooltip with no extra markup.

Capstone: A Modal Overlay

Combine fixed, absolute, and z-index to build a modal that hovers above the page with a dark backdrop and a centred dialog box.

Codelab: A CSS-only Modal

Ship a working modal in your local editor — no JavaScript needed. Use the checkbox-hack to toggle visibility entirely with CSS.