[{"data":1,"prerenderedAt":1054},["ShallowReactive",2],{"page-\u002Fcss\u002F10-floats-and-positioning":3},{"id":4,"title":5,"body":6,"description":1047,"extension":1048,"meta":1049,"navigation":123,"path":1050,"seo":1051,"stem":1052,"__hash__":1053},"content\u002Fcss\u002F10-floats-and-positioning.md","10 — Floats, z-index & the Stacking Context Model",{"type":7,"value":8,"toc":1029},"minimark",[9,13,38,47,159,165,212,216,227,237,242,250,254,351,403,410,449,453,599,613,741,745,815,819,883,887,956,1025],[10,11,5],"h1",{"id":12},"_10-floats-z-index-the-stacking-context-model",[14,15,16,20,21,25,26,29,30,33,34,37],"p",{},[17,18,19],"code",{},"z-index"," doesn't work the way most developers think. It's not a global number — it's local to a ",[22,23,24],"em",{},"stacking context",". A ",[17,27,28],{},"z-index: 9999"," inside a ",[17,31,32],{},"z-index: 1"," parent loses to a ",[17,35,36],{},"z-index: 2"," sibling of that parent. The stacking context is the cage. This chapter engineers the model so z-index becomes predictable.",[39,40,42,43,46],"h2",{"id":41},"floats-legacy-but-flow-root-is-the-modern-clear","Floats — legacy, but ",[17,44,45],{},"flow-root"," is the modern clear",[48,49,51],"code-wrapper",{"language":50},"css",[52,53,57],"pre",{"className":54,"code":55,"language":50,"meta":56,"style":56},"language-css shiki shiki-themes github-light github-dark","\u002F* Floats were the layout tool before flex\u002Fgrid. Now: only for text wrapping around an image. *\u002F\nimg { float: inline-start; margin-inline-end: 1rem; margin-block-end: 1rem; }\n\n\u002F* Floated children don't contribute to parent height (out of flow) → parent collapses. *\u002F\n\u002F* Modern clear: display: flow-root (establishes BFC, contains floats, no overflow clipping). *\u002F\n.parent { display: flow-root; }  \u002F* replaces the clearfix hack *\u002F\n","",[17,58,59,68,118,125,131,137],{"__ignoreMap":56},[60,61,64],"span",{"class":62,"line":63},"line",1,[60,65,67],{"class":66},"sdCPZ","\u002F* Floats were the layout tool before flex\u002Fgrid. Now: only for text wrapping around an image. *\u002F\n",[60,69,71,75,79,83,86,89,92,95,97,100,104,106,109,111,113,115],{"class":62,"line":70},2,[60,72,74],{"class":73},"sk71V","img",[60,76,78],{"class":77},"ssxIu"," { ",[60,80,82],{"class":81},"snvgF","float",[60,84,85],{"class":77},": ",[60,87,88],{"class":81},"inline-start",[60,90,91],{"class":77},"; ",[60,93,94],{"class":81},"margin-inline-end",[60,96,85],{"class":77},[60,98,99],{"class":81},"1",[60,101,103],{"class":102},"svdQ7","rem",[60,105,91],{"class":77},[60,107,108],{"class":81},"margin-block-end",[60,110,85],{"class":77},[60,112,99],{"class":81},[60,114,103],{"class":102},[60,116,117],{"class":77},"; }\n",[60,119,121],{"class":62,"line":120},3,[60,122,124],{"emptyLinePlaceholder":123},true,"\n",[60,126,128],{"class":62,"line":127},4,[60,129,130],{"class":66},"\u002F* Floated children don't contribute to parent height (out of flow) → parent collapses. *\u002F\n",[60,132,134],{"class":62,"line":133},5,[60,135,136],{"class":66},"\u002F* Modern clear: display: flow-root (establishes BFC, contains floats, no overflow clipping). *\u002F\n",[60,138,140,144,146,149,151,153,156],{"class":62,"line":139},6,[60,141,143],{"class":142},"sIsaT",".parent",[60,145,78],{"class":77},[60,147,148],{"class":81},"display",[60,150,85],{"class":77},[60,152,45],{"class":81},[60,154,155],{"class":77},"; }  ",[60,157,158],{"class":66},"\u002F* replaces the clearfix hack *\u002F\n",[39,160,162,164],{"id":161},"z-index-only-on-positioned-elements",[17,163,19],{}," — only on positioned elements",[48,166,167],{"language":50},[52,168,170],{"className":54,"code":169,"language":50,"meta":56,"style":56},"\u002F* z-index applies ONLY to positioned (relative\u002Fabsolute\u002Ffixed\u002Fsticky) elements. *\u002F\n\u002F* z-index: 10 on position: static does NOTHING. Set position: relative first. *\u002F\n.modal { position: fixed; z-index: 100; }   \u002F* positioned + z-index → works *\u002F\n",[17,171,172,177,182],{"__ignoreMap":56},[60,173,174],{"class":62,"line":63},[60,175,176],{"class":66},"\u002F* z-index applies ONLY to positioned (relative\u002Fabsolute\u002Ffixed\u002Fsticky) elements. *\u002F\n",[60,178,179],{"class":62,"line":70},[60,180,181],{"class":66},"\u002F* z-index: 10 on position: static does NOTHING. Set position: relative first. *\u002F\n",[60,183,184,187,189,192,194,197,199,201,203,206,209],{"class":62,"line":120},[60,185,186],{"class":142},".modal",[60,188,78],{"class":77},[60,190,191],{"class":81},"position",[60,193,85],{"class":77},[60,195,196],{"class":81},"fixed",[60,198,91],{"class":77},[60,200,19],{"class":81},[60,202,85],{"class":77},[60,204,205],{"class":81},"100",[60,207,208],{"class":77},"; }   ",[60,210,211],{"class":66},"\u002F* positioned + z-index → works *\u002F\n",[39,213,215],{"id":214},"stacking-contexts-the-cage-model","Stacking Contexts — the cage model",[14,217,218,219,221,222,226],{},"A stacking context is a group of elements stacked together. A child's ",[17,220,19],{}," is ",[223,224,225],"strong",{},"relative to its stacking context"," — it can't escape the parent's z-order.",[48,228,230],{"language":229},"text",[52,231,235],{"className":232,"code":234,"language":229,"meta":56},[233],"language-text","Properties that CREATE a stacking context:\n  - position: absolute\u002Frelative + z-index ≠ auto\n  - position: fixed\u002Fsticky (ALWAYS, regardless of z-index)\n  - opacity \u003C 1\n  - transform, filter, perspective, clip-path, mask\n  - will-change (with one of the above values)\n  - isolation: isolate\n  - mix-blend-mode ≠ normal\n  - contain: layout\u002Fpaint\u002Fstrict\u002Fcontent\n",[17,236,234],{"__ignoreMap":56},[238,239,241],"h3",{"id":240},"the-1-z-index-bug-ancestor-context-traps-children","The #1 z-index bug: ancestor context traps children",[48,243,244],{"language":229},[52,245,248],{"className":246,"code":247,"language":229,"meta":56},[233],"  root stacking context\n  ├── .app (transform → creates context, z-index: auto → treated as 0)\n  │     └── .modal (z-index: 9999 → trapped inside .app's context)\n  └── .dropdown (z-index: 100 → at root level)\n\n  .dropdown (100) beats .app (0) → .dropdown renders ABOVE .modal, despite .modal's 9999.\n  The child's 9999 only competes with siblings INSIDE .app's context, not outside.\n",[17,249,247],{"__ignoreMap":56},[238,251,253],{"id":252},"anti-pattern-transform-ancestor-traps-a-high-z-index-child","Anti-pattern: transform ancestor traps a high z-index child",[48,255,256],{"language":50},[52,257,259],{"className":54,"code":258,"language":50,"meta":56,"style":56},"\u002F* ❌ .app has transform → creates a stacking context. .modal's z-index:9999 is trapped inside.\n   .dropdown (outside .app, z-index:100 at root) renders above .modal. *\u002F\n.app { transform: translateZ(0); }  \u002F* \"GPU acceleration\" → creates context *\u002F\n.modal { position: fixed; z-index: 9999; }    \u002F* inside .app in DOM → trapped *\u002F\n.dropdown { position: fixed; z-index: 100; }  \u002F* outside .app → at root level → wins *\u002F\n",[17,260,261,266,271,298,325],{"__ignoreMap":56},[60,262,263],{"class":62,"line":63},[60,264,265],{"class":66},"\u002F* ❌ .app has transform → creates a stacking context. .modal's z-index:9999 is trapped inside.\n",[60,267,268],{"class":62,"line":70},[60,269,270],{"class":66},"   .dropdown (outside .app, z-index:100 at root) renders above .modal. *\u002F\n",[60,272,273,276,278,281,283,286,289,292,295],{"class":62,"line":120},[60,274,275],{"class":142},".app",[60,277,78],{"class":77},[60,279,280],{"class":81},"transform",[60,282,85],{"class":77},[60,284,285],{"class":81},"translateZ",[60,287,288],{"class":77},"(",[60,290,291],{"class":81},"0",[60,293,294],{"class":77},"); }  ",[60,296,297],{"class":66},"\u002F* \"GPU acceleration\" → creates context *\u002F\n",[60,299,300,302,304,306,308,310,312,314,316,319,322],{"class":62,"line":127},[60,301,186],{"class":142},[60,303,78],{"class":77},[60,305,191],{"class":81},[60,307,85],{"class":77},[60,309,196],{"class":81},[60,311,91],{"class":77},[60,313,19],{"class":81},[60,315,85],{"class":77},[60,317,318],{"class":81},"9999",[60,320,321],{"class":77},"; }    ",[60,323,324],{"class":66},"\u002F* inside .app in DOM → trapped *\u002F\n",[60,326,327,330,332,334,336,338,340,342,344,346,348],{"class":62,"line":133},[60,328,329],{"class":142},".dropdown",[60,331,78],{"class":77},[60,333,191],{"class":81},[60,335,85],{"class":77},[60,337,196],{"class":81},[60,339,91],{"class":77},[60,341,19],{"class":81},[60,343,85],{"class":77},[60,345,205],{"class":81},[60,347,155],{"class":77},[60,349,350],{"class":66},"\u002F* outside .app → at root level → wins *\u002F\n",[48,352,353],{"language":50},[52,354,356],{"className":54,"code":355,"language":50,"meta":56,"style":56},"\u002F* ✓ Raise .app's z-index above .dropdown, OR move .modal outside .app in the DOM. *\u002F\n.app { transform: translateZ(0); position: relative; z-index: 1000; }  \u002F* .app (1000) > .dropdown (100) *\u002F\n",[17,357,358,363],{"__ignoreMap":56},[60,359,360],{"class":62,"line":63},[60,361,362],{"class":66},"\u002F* ✓ Raise .app's z-index above .dropdown, OR move .modal outside .app in the DOM. *\u002F\n",[60,364,365,367,369,371,373,375,377,379,382,384,386,389,391,393,395,398,400],{"class":62,"line":70},[60,366,275],{"class":142},[60,368,78],{"class":77},[60,370,280],{"class":81},[60,372,85],{"class":77},[60,374,285],{"class":81},[60,376,288],{"class":77},[60,378,291],{"class":81},[60,380,381],{"class":77},"); ",[60,383,191],{"class":81},[60,385,85],{"class":77},[60,387,388],{"class":81},"relative",[60,390,91],{"class":77},[60,392,19],{"class":81},[60,394,85],{"class":77},[60,396,397],{"class":81},"1000",[60,399,155],{"class":77},[60,401,402],{"class":66},"\u002F* .app (1000) > .dropdown (100) *\u002F\n",[39,404,406,409],{"id":405},"isolation-isolate-create-a-context-without-positioning",[17,407,408],{},"isolation: isolate"," — create a context without positioning",[48,411,412],{"language":50},[52,413,415],{"className":54,"code":414,"language":50,"meta":56,"style":56},"\u002F* Creates a stacking context WITHOUT position\u002Fz-index\u002Ftransform.\n   Traps a component's z-index within itself — children's z-index don't leak out. *\u002F\n.widget { isolation: isolate; }\n\u002F* Use for components that shouldn't interact with the page's stacking order. *\u002F\n",[17,416,417,422,427,444],{"__ignoreMap":56},[60,418,419],{"class":62,"line":63},[60,420,421],{"class":66},"\u002F* Creates a stacking context WITHOUT position\u002Fz-index\u002Ftransform.\n",[60,423,424],{"class":62,"line":70},[60,425,426],{"class":66},"   Traps a component's z-index within itself — children's z-index don't leak out. *\u002F\n",[60,428,429,432,434,437,439,442],{"class":62,"line":120},[60,430,431],{"class":142},".widget",[60,433,78],{"class":77},[60,435,436],{"class":81},"isolation",[60,438,85],{"class":77},[60,440,441],{"class":81},"isolate",[60,443,117],{"class":77},[60,445,446],{"class":62,"line":127},[60,447,448],{"class":66},"\u002F* Use for components that shouldn't interact with the page's stacking order. *\u002F\n",[39,450,452],{"id":451},"z-index-token-scale-avoid-the-9999-arms-race","z-index Token Scale — avoid the 9999 arms race",[48,454,455],{"language":50},[52,456,458],{"className":54,"code":457,"language":50,"meta":56,"style":56},":root {\n  \u002F* Documented, spaced scale. Never ad-hoc 9999. *\u002F\n  --z-base: 0;\n  --z-dropdown: 100;\n  --z-sticky: 200;\n  --z-overlay: 300;\n  --z-modal: 400;\n  --z-toast: 500;\n}\n.modal { z-index: var(--z-modal); }\n.toast { z-index: var(--z-toast); }  \u002F* toast above modal — one source of truth *\u002F\n",[17,459,460,468,473,486,497,509,521,534,547,553,575],{"__ignoreMap":56},[60,461,462,465],{"class":62,"line":63},[60,463,464],{"class":142},":root",[60,466,467],{"class":77}," {\n",[60,469,470],{"class":62,"line":70},[60,471,472],{"class":66},"  \u002F* Documented, spaced scale. Never ad-hoc 9999. *\u002F\n",[60,474,475,479,481,483],{"class":62,"line":120},[60,476,478],{"class":477},"sCrzJ","  --z-base",[60,480,85],{"class":77},[60,482,291],{"class":81},[60,484,485],{"class":77},";\n",[60,487,488,491,493,495],{"class":62,"line":127},[60,489,490],{"class":477},"  --z-dropdown",[60,492,85],{"class":77},[60,494,205],{"class":81},[60,496,485],{"class":77},[60,498,499,502,504,507],{"class":62,"line":133},[60,500,501],{"class":477},"  --z-sticky",[60,503,85],{"class":77},[60,505,506],{"class":81},"200",[60,508,485],{"class":77},[60,510,511,514,516,519],{"class":62,"line":139},[60,512,513],{"class":477},"  --z-overlay",[60,515,85],{"class":77},[60,517,518],{"class":81},"300",[60,520,485],{"class":77},[60,522,524,527,529,532],{"class":62,"line":523},7,[60,525,526],{"class":477},"  --z-modal",[60,528,85],{"class":77},[60,530,531],{"class":81},"400",[60,533,485],{"class":77},[60,535,537,540,542,545],{"class":62,"line":536},8,[60,538,539],{"class":477},"  --z-toast",[60,541,85],{"class":77},[60,543,544],{"class":81},"500",[60,546,485],{"class":77},[60,548,550],{"class":62,"line":549},9,[60,551,552],{"class":77},"}\n",[60,554,556,558,560,562,564,567,569,572],{"class":62,"line":555},10,[60,557,186],{"class":142},[60,559,78],{"class":77},[60,561,19],{"class":81},[60,563,85],{"class":77},[60,565,566],{"class":81},"var",[60,568,288],{"class":77},[60,570,571],{"class":477},"--z-modal",[60,573,574],{"class":77},"); }\n",[60,576,578,581,583,585,587,589,591,594,596],{"class":62,"line":577},11,[60,579,580],{"class":142},".toast",[60,582,78],{"class":77},[60,584,19],{"class":81},[60,586,85],{"class":77},[60,588,566],{"class":81},[60,590,288],{"class":77},[60,592,593],{"class":477},"--z-toast",[60,595,294],{"class":77},[60,597,598],{"class":66},"\u002F* toast above modal — one source of truth *\u002F\n",[39,600,602,603,606,607,606,610],{"id":601},"clipping-overflow-vs-clip-path-vs-mask","Clipping — ",[17,604,605],{},"overflow"," vs ",[17,608,609],{},"clip-path",[17,611,612],{},"mask",[48,614,615],{"language":50},[52,616,618],{"className":54,"code":617,"language":50,"meta":56,"style":56},".box { overflow: hidden; }                    \u002F* rectangular clip + creates BFC (clears floats, clips shadows) *\u002F\n.box { overflow: clip; }                      \u002F* rectangular clip, NO BFC, NO scroll container (modern) *\u002F\n.img { clip-path: circle(50%); }              \u002F* non-rectangular: circles, polygons, SVG paths. Animatable. *\u002F\n.img { clip-path: polygon(0 0, 100% 0, 100% 100%); }  \u002F* triangle *\u002F\n\n\u002F* overflow:hidden clips child shadows. Use overflow:clip (no BFC side effects) or restructure. *\u002F\n",[17,619,620,640,659,687,732,736],{"__ignoreMap":56},[60,621,622,625,627,629,631,634,637],{"class":62,"line":63},[60,623,624],{"class":142},".box",[60,626,78],{"class":77},[60,628,605],{"class":81},[60,630,85],{"class":77},[60,632,633],{"class":81},"hidden",[60,635,636],{"class":77},"; }                    ",[60,638,639],{"class":66},"\u002F* rectangular clip + creates BFC (clears floats, clips shadows) *\u002F\n",[60,641,642,644,646,648,650,653,656],{"class":62,"line":70},[60,643,624],{"class":142},[60,645,78],{"class":77},[60,647,605],{"class":81},[60,649,85],{"class":77},[60,651,652],{"class":81},"clip",[60,654,655],{"class":77},"; }                      ",[60,657,658],{"class":66},"\u002F* rectangular clip, NO BFC, NO scroll container (modern) *\u002F\n",[60,660,661,664,666,668,670,673,675,678,681,684],{"class":62,"line":120},[60,662,663],{"class":142},".img",[60,665,78],{"class":77},[60,667,609],{"class":81},[60,669,85],{"class":77},[60,671,672],{"class":81},"circle",[60,674,288],{"class":77},[60,676,677],{"class":81},"50",[60,679,680],{"class":102},"%",[60,682,683],{"class":77},"); }              ",[60,685,686],{"class":66},"\u002F* non-rectangular: circles, polygons, SVG paths. Animatable. *\u002F\n",[60,688,689,691,693,695,697,700,702,704,707,710,712,714,716,718,720,722,725,727,729],{"class":62,"line":127},[60,690,663],{"class":142},[60,692,78],{"class":77},[60,694,609],{"class":81},[60,696,85],{"class":77},[60,698,699],{"class":81},"polygon",[60,701,288],{"class":77},[60,703,291],{"class":81},[60,705,706],{"class":81}," 0",[60,708,709],{"class":77},", ",[60,711,205],{"class":81},[60,713,680],{"class":102},[60,715,706],{"class":81},[60,717,709],{"class":77},[60,719,205],{"class":81},[60,721,680],{"class":102},[60,723,724],{"class":81}," 100",[60,726,680],{"class":102},[60,728,294],{"class":77},[60,730,731],{"class":66},"\u002F* triangle *\u002F\n",[60,733,734],{"class":62,"line":133},[60,735,124],{"emptyLinePlaceholder":123},[60,737,738],{"class":62,"line":139},[60,739,740],{"class":66},"\u002F* overflow:hidden clips child shadows. Use overflow:clip (no BFC side effects) or restructure. *\u002F\n",[39,742,744],{"id":743},"tips-tricks","💡 Tips & Tricks",[746,747,748,757,769,781,794],"ul",{},[749,750,751,85,754,756],"li",{},[223,752,753],{},"Idiom",[17,755,408],{}," to trap a component's z-index — no positioning side effects, just a context boundary. Prevents z-index leaks from widgets into the page.",[749,758,759,761,762,765,766,768],{},[223,760,753],{},": a z-index token scale (",[17,763,764],{},"--z-modal: 400",") is the only sustainable z-index strategy. Documented, spaced, one source of truth. No ",[17,767,318],{}," arms race.",[749,770,771,85,773,776,777,780],{},[223,772,753],{},[17,774,775],{},"display: flow-root"," is the modern clearfix — contains floats and child margins without ",[17,778,779],{},"overflow: hidden","'s clipping. Use when you must use floats (text-wrap).",[749,782,783,85,785,787,788,790,791,793],{},[223,784,753],{},[17,786,609],{}," for non-rectangular clipping (circles, polygons) — animatable, unlike ",[17,789,779],{},". Use ",[17,792,612],{}," for soft\u002Falpha-based fades.",[749,795,796,799,800,802,803,709,805,709,808,709,811,814],{},[223,797,798],{},"Debug",": when ",[17,801,28],{}," isn't on top, walk the ancestor chain for stacking-context creators (",[17,804,280],{},[17,806,807],{},"opacity\u003C1",[17,809,810],{},"filter",[17,812,813],{},"position: fixed","). The ancestor's z-index (or auto=0) is the ceiling.",[39,816,818],{"id":817},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[746,820,821,829,841,848,859,867],{},[749,822,823,828],{},[223,824,825,827],{},[17,826,813],{}," always creates a stacking context",": regardless of z-index. Fixed elements trap their children's z-index.",[749,830,831,85,837,840],{},[223,832,833,836],{},[17,834,835],{},"opacity \u003C 1"," creates a stacking context",[17,838,839],{},"opacity: 0.99"," on a parent traps children — a surprise when fading in a parent changes z-order.",[749,842,843,847],{},[223,844,845,836],{},[17,846,280],{}," AND a containing block for fixed descendants — double surprise.",[749,849,850,85,855,858],{},[223,851,852,853],{},"Negative ",[17,854,19],{},[17,856,857],{},"z-index: -1"," puts the element behind its parent's background (if the parent doesn't create a context). Useful for decorative layers.",[749,860,861,866],{},[223,862,863,865],{},[17,864,609],{}," doesn't affect layout",": the element's box is unchanged; only the visible area is clipped. It still takes its normal space.",[749,868,869,874,875,878,879,882],{},[223,870,871,873],{},[17,872,779],{}," clips child shadows and transforms",": a child's ",[17,876,877],{},"box-shadow"," extending outside is cut. Use ",[17,880,881],{},"overflow: clip"," (no scroll container) or restructure.",[39,884,886],{"id":885},"spot-the-bug","🧠 Spot the Bug",[48,888,889],{"language":50},[52,890,892],{"className":54,"code":891,"language":50,"meta":56,"style":56},".app { transform: translateZ(0); }\n.modal { position: fixed; z-index: 9999; }\n.dropdown { position: fixed; z-index: 100; }\n",[17,893,894,912,934],{"__ignoreMap":56},[60,895,896,898,900,902,904,906,908,910],{"class":62,"line":63},[60,897,275],{"class":142},[60,899,78],{"class":77},[60,901,280],{"class":81},[60,903,85],{"class":77},[60,905,285],{"class":81},[60,907,288],{"class":77},[60,909,291],{"class":81},[60,911,574],{"class":77},[60,913,914,916,918,920,922,924,926,928,930,932],{"class":62,"line":70},[60,915,186],{"class":142},[60,917,78],{"class":77},[60,919,191],{"class":81},[60,921,85],{"class":77},[60,923,196],{"class":81},[60,925,91],{"class":77},[60,927,19],{"class":81},[60,929,85],{"class":77},[60,931,318],{"class":81},[60,933,117],{"class":77},[60,935,936,938,940,942,944,946,948,950,952,954],{"class":62,"line":120},[60,937,329],{"class":142},[60,939,78],{"class":77},[60,941,191],{"class":81},[60,943,85],{"class":77},[60,945,196],{"class":81},[60,947,91],{"class":77},[60,949,19],{"class":81},[60,951,85],{"class":77},[60,953,205],{"class":81},[60,955,117],{"class":77},[957,958,959,963],"details",{},[960,961,962],"summary",{},"Answer",[14,964,965,967,968,971,972,974,975,977,978,980,981,983,984,986,987,989,990,993,994,996,997,999,1000,1002,1003,1005,1006,1008,1009,1011,1012,1014,1015,1018,1019,1021,1022,1024],{},[17,966,275],{}," has ",[17,969,970],{},"transform: translateZ(0)"," → creates a stacking context. ",[17,973,186],{}," is inside ",[17,976,275],{}," (DOM) → its ",[17,979,28],{}," is trapped within ",[17,982,275],{},"'s context. ",[17,985,329],{}," is outside ",[17,988,275],{},", at the root level with ",[17,991,992],{},"z-index: 100",". The root context compares ",[17,995,275],{}," (z-index: auto → 0) vs ",[17,998,329],{}," (100) → ",[17,1001,329],{}," wins, rendering above ",[17,1004,275],{}," and all its descendants including ",[17,1007,186],{},". Fix: give ",[17,1010,275],{}," a z-index higher than ",[17,1013,329],{}," (",[17,1016,1017],{},"z-index: 1000","), or move ",[17,1020,186],{}," outside ",[17,1023,275],{}," in the DOM. The lesson: a stacking-context-creating ancestor traps descendants' z-index within the ancestor's context.",[1026,1027,1028],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}",{"title":56,"searchDepth":70,"depth":70,"links":1030},[1031,1033,1035,1039,1041,1042,1044,1045,1046],{"id":41,"depth":70,"text":1032},"Floats — legacy, but flow-root is the modern clear",{"id":161,"depth":70,"text":1034},"z-index — only on positioned elements",{"id":214,"depth":70,"text":215,"children":1036},[1037,1038],{"id":240,"depth":120,"text":241},{"id":252,"depth":120,"text":253},{"id":405,"depth":70,"text":1040},"isolation: isolate — create a context without positioning",{"id":451,"depth":70,"text":452},{"id":601,"depth":70,"text":1043},"Clipping — overflow vs clip-path vs mask",{"id":743,"depth":70,"text":744},{"id":817,"depth":70,"text":818},{"id":885,"depth":70,"text":886},"Stacking-context creation rules, the ancestor-z-index trap, isolation:isolate, clip-path vs overflow, and the transform-creates-a-context surprise. Code-first reference with z-index token scales.","md",{},"\u002Fcss\u002F10-floats-and-positioning",{"title":5,"description":1047},"css\u002F10-floats-and-positioning","SEfQwqC8SnVtOi9BwfvnW5A--gEYnAjAEagKfumtWic",1789924644826]