Stacking Context
The nested coordinate system that decides what paints above what, and why z-index often does nothing.
A stacking context is a region of the document within which elements are layered relative to one another. Contexts nest, and a child can never escape its parent's position in the ordering — which is why an element with an enormous z-index can still render beneath something with a small one.
Contexts are created by more things than most people expect: any positioned element with a z-index, but also opacity below one, transforms, filters, will-change, and several others. A transform added for an animation can therefore change layering with no styling change at all.
The practical discipline is to treat layering as a system rather than a per-component decision: a small set of named tiers (content, raised, scrim, overlay, bar, sheet) with numbers assigned once. Ad-hoc values escalate the same way specificity does.
Overlays are where this bites hardest, and the questions are specific. Does this overlay cover the whole viewport, or is it inset below persistent chrome? If it covers, it must out-layer that chrome or its own header renders occluded. Does the library's backdrop establish a tier, or is it transparent to layering — leaving anything beneath it still clickable, so clicks land, focus escapes, and dismissal routes to the wrong surface?
Occlusion is nearly invisible to component tests: role queries and accessibility checks still pass. Hit-testing catches it; so does looking.
See also15
Portal
Rendering an element into a different part of the document than its logical parent.
Web Platform18 connections
Focus Trap
Confining keyboard focus inside a modal surface so it cannot wander behind it.
Design & Interface13 connections
Motion Design
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
Design & Interface23 connections
Visual Regression Testing
Comparing rendered output against a stored baseline to catch unintended visual change.
Testing & Verification14 connections
Focus Management
Deliberately controlling which element receives keyboard focus as an interface changes.
Design & Interface28 connections
Component Story
An isolated rendered instance of a component, usable as documentation, a workbench, and a test.
Testing & Verification17 connections
Headless Component
A component supplying behavior and accessibility with no styling of its own.
Design & Interface16 connections
ARIA
Attributes that describe roles, states, and relationships to assistive technology when HTML cannot.
Design & Interface31 connections
Keyboard Navigation
Making every interactive affordance reachable and operable without a pointer.
Design & Interface34 connections
Document Object Model
The live tree of objects a browser builds from a document, and the surface every UI framework writes to.
Web Platform27 connections
Compositor
The component that draws each window or layer into its own off-screen buffer and then combines them into the final image, which makes transparency, effects, and tear-free output possible at a small latency cost.
Graphics & Rendering11 connections
Alpha Compositing
Combining images using a fourth channel that records each pixel's opacity, the arithmetic behind transparency, layering, and smooth edges.
Graphics & Rendering6 connections
Glassmorphism
An interface style of translucent, blurred panels that let the content behind them show through like frosted glass, recurring across operating systems since the 2000s and repeatedly criticized for hurting legibility.
Design & Interface9 connections
Modal Dialog
A window that blocks the rest of the interface until it is dealt with, useful for decisions that truly demand attention and overused for almost everything else.
Design & Interface16 connections
Clickjacking
Tricking a user into clicking something on another site by loading it invisibly in a frame beneath a decoy, and the headers that stop a page from being framed.
Web Platform9 connections
Linked from15
- Alpha CompositingGraphics & Rendering
Combining images using a fourth channel that records each pixel's opacity, the arithmetic behind transparency, layering, and smooth edges.
- Box ModelDesign & Interface
The rule that every element on a web page is a rectangle of content wrapped in padding, border, and margin, and the two quirks, box sizing and collapsing margins, behind most surprises in CSS spacing.
- ClickjackingWeb Platform
Tricking a user into clicking something on another site by loading it invisibly in a frame beneath a decoy, and the headers that stop a page from being framed.
- CompositorGraphics & Rendering
The component that draws each window or layer into its own off-screen buffer and then combines them into the final image, which makes transparency, effects, and tear-free output possible at a small latency cost.
- Focus TrapDesign & Interface
Confining keyboard focus inside a modal surface so it cannot wander behind it.
- GlassmorphismDesign & Interface
An interface style of translucent, blurred panels that let the content behind them show through like frosted glass, recurring across operating systems since the 2000s and repeatedly criticized for hurting legibility.
- Headless BrowserTesting & Verification
A real browser driven programmatically without a visible window.
- Modal DialogDesign & Interface
A window that blocks the rest of the interface until it is dealt with, useful for decisions that truly demand attention and overused for almost everything else.
- Motion DesignDesign & Interface
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
- PortalWeb Platform
Rendering an element into a different part of the document than its logical parent.
- Reduced MotionDesign & Interface
An operating-system preference signaling that animation should be minimized, for real medical reasons.
- Responsive BreakpointDesign & Interface
A viewport width at which a layout changes, and the assumptions that come with it.
- TooltipDesign & Interface
A small label that appears when hovering or focusing an element, useful for naming icons and easy to make inaccessible, unreachable on touch, or covered by other layers.
- View TransitionsWeb Platform
A browser API that animates between two states of a page, or between two pages, by snapshotting the old and new views and morphing between them.
- Visual Regression TestingTesting & Verification
Comparing rendered output against a stored baseline to catch unintended visual change.