Stacking Contexts & Anchor Positioning

Part 1: three overlapping boxes inside a parent — toggle what creates a stacking context and watch a sibling with lower z-index win anyway. Part 2: anchor-position a popover without JS layout math.

1 · Stacking context explorer

Top painted box

—

Parent context?

none

Highest child z-index

Rival z-index

Red 1

Blue 2

Green 3

Rival (sibling) 5

Parent stacking-context triggers (only one active at a time):

none (default) opacity: 0.99 transform: translateZ(0) filter: blur(0) isolation: isolate position + z-index: 1

Red

Blue

Green

Rival sibling of parent

2 · Anchor positioning

checking…

Popover anchored in CSS
Uses anchor-name, position-anchor, and position-area — no getBoundingClientRect().