[{"data":1,"prerenderedAt":1417},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained\u002F":3,"content-all-pages":853,"live-demo:position-area-grid":1411},{"id":4,"title":5,"body":6,"description":836,"extension":837,"meta":838,"navigation":238,"path":849,"seo":850,"stem":851,"__hash__":852},"content\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained\u002Findex.md","position-area: The Anchor Placement Grid",{"type":7,"value":8,"toc":823},"minimark",[9,13,55,60,66,164,179,183,193,197,363,383,387,406,468,472,512,516,533,577,590,594,632,641,645,694,698,720,724,743,747,757,770,780,791,795,819],[10,11,5],"h1",{"id":12},"position-area-the-anchor-placement-grid",[14,15,16,17,21,22,25,26,29,30,33,34,33,37,40,41,43,44,49,50,54],"p",{},"Anchor positioning lets an overlay attach itself to another element with CSS alone. The first examples most people see use the ",[18,19,20],"code",{},"anchor()"," function in inset properties — ",[18,23,24],{},"top: anchor(bottom); left: anchor(left)"," — which is precise but verbose, and easy to get subtly wrong when centring or spanning. ",[18,27,28],{},"position-area"," is the higher-level alternative. It imagines a 3×3 grid around the anchor, with the anchor in the middle cell, and lets you say which cells the overlay should occupy: ",[18,31,32],{},"top",", ",[18,35,36],{},"bottom right",[18,38,39],{},"bottom span-right",". The browser works out the containing block and a sensible default alignment. This page explains the grid, the keywords, and how ",[18,42,28],{}," combines with fallbacks. It belongs to ",[45,46,48],"a",{"href":47},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002F","Anchor Positioning & Overlays"," in the ",[45,51,53],{"href":52},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts"," guide.",[56,57,59],"h2",{"id":58},"the-grid-around-the-anchor","The grid around the anchor",[14,61,62,63,65],{},"Draw lines along the anchor's four edges and extend them to the edges of the positioned element's containing block. That divides the space into nine cells: three rows (top, center, bottom) and three columns (left, center, right), with the anchor in the centre cell. ",[18,64,28],{}," names one or more of those cells, and the element's containing block becomes that region. Insets default to zero inside it, so the element sits within the chosen area.",[67,68,74,75,74,79,74,83,74,91,74,103,74,111,74,115,74,120,74,124,74,131,74,136,74,142,74,145,74,149,74,152,74,155,74,159,74,162],"svg",{"viewBox":69,"role":70,"ariaLabel":71,"xmlns":72,"style":73},"0 0 720 320","img","A 3 by 3 grid formed by extending the anchor's edges; the anchor is the center cell and the eight surrounding cells are named by row and column keywords","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[76,77,78],"title",{},"Nine cells around the anchor",[80,81,82],"desc",{},"A large rectangle split by lines through the anchor's edges into nine cells. The center cell holds the anchor button. The other cells are labelled top left, top center, top right, center left, center right, bottom left, bottom center and bottom right. The row keywords are top, center and bottom; the column keywords are left, center and right.",[84,85,90],"text",{"textAnchor":86,"x":87,"y":88,"style":89},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","position-area picks cells of this grid",[92,93],"rect",{"x":94,"y":95,"width":96,"height":97,"rx":98,"fill":99,"stroke":100,"strokeWidth":101,"opacity":102},"120","50","480","250","6","none","currentColor","1.5","0.6",[104,105],"line",{"x1":106,"y1":95,"x2":106,"y2":106,"stroke":100,"strokeWidth":107,"strokeDashArray":108,"opacity":102},"300","1",[109,110],"5","4",[104,112],{"x1":113,"y1":95,"x2":113,"y2":106,"stroke":100,"strokeWidth":107,"strokeDashArray":114,"opacity":102},"420",[109,110],[104,116],{"x1":94,"y1":117,"x2":118,"y2":117,"stroke":100,"strokeWidth":107,"strokeDashArray":119,"opacity":102},"150","600",[109,110],[104,121],{"x1":94,"y1":122,"x2":118,"y2":122,"stroke":100,"strokeWidth":107,"strokeDashArray":123,"opacity":102},"200",[109,110],[92,125],{"x":126,"y":127,"width":128,"height":129,"rx":98,"fill":130,"opacity":102},"305","155","110","40","#7aa2ff",[84,132,135],{"textAnchor":86,"x":87,"y":133,"style":134},"180","text-anchor:middle;fill:currentColor;font:600 13px sans-serif","anchor",[84,137,141],{"textAnchor":86,"x":138,"y":139,"style":140},"210","104","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace","top left",[84,143,144],{"textAnchor":86,"x":87,"y":139,"style":140},"top center",[84,146,148],{"textAnchor":86,"x":147,"y":139,"style":140},"510","top right",[84,150,151],{"textAnchor":86,"x":138,"y":133,"style":140},"center left",[84,153,154],{"textAnchor":86,"x":147,"y":133,"style":140},"center right",[84,156,158],{"textAnchor":86,"x":138,"y":157,"style":140},"254","bottom left",[84,160,161],{"textAnchor":86,"x":87,"y":157,"style":140},"bottom center",[84,163,36],{"textAnchor":86,"x":147,"y":157,"style":140},[14,165,166,167,170,171,174,175,178],{},"A single keyword is shorthand for a whole row or column band: ",[18,168,169],{},"position-area: top"," is equivalent to ",[18,172,173],{},"top span-all",", the entire top row, and default alignment centres the element over the anchor within it. Using one row keyword and one column keyword picks a single cell. The ",[18,176,177],{},"span-*"," keywords, described below, pick two adjacent cells.",[56,180,182],{"id":181},"the-complete-implementation","The complete implementation",[14,184,185,186,188,189,192],{},"Choose a value in the demo to move the panel around the anchor button. The demo uses no script: radio buttons set ",[18,187,28],{}," through ",[18,190,191],{},":has()",".",[194,195],"live-demo",{"name":196},"position-area-grid",[198,199,204],"pre",{"className":200,"code":201,"language":202,"meta":203,"style":203},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".trigger {\n  anchor-name: --menu-trigger;\n}\n\n.panel {\n  position: absolute;\n  position-anchor: --menu-trigger;\n  position-area: bottom span-right;   \u002F* below, aligned with the trigger's left edge *\u002F\n  margin-block-start: 0.25rem;         \u002F* a small gap from the anchor *\u002F\n  inline-size: max-content;\n  max-inline-size: 16rem;\n\n  \u002F* If there is no room below, try above; if no room to the right, mirror. *\u002F\n  position-try-fallbacks: flip-block, flip-inline;\n}\n","css","",[18,205,206,218,227,233,240,248,263,271,289,310,323,338,343,349,358],{"__ignoreMap":203},[207,208,210,214],"span",{"class":104,"line":209},1,[207,211,213],{"class":212},"s-5SL",".trigger",[207,215,217],{"class":216},"suds8"," {\n",[207,219,221,224],{"class":104,"line":220},2,[207,222,223],{"class":212},"  anchor-name",[207,225,226],{"class":216},": --menu-trigger;\n",[207,228,230],{"class":104,"line":229},3,[207,231,232],{"class":216},"}\n",[207,234,236],{"class":104,"line":235},4,[207,237,239],{"emptyLinePlaceholder":238},true,"\n",[207,241,243,246],{"class":104,"line":242},5,[207,244,245],{"class":212},".panel",[207,247,217],{"class":216},[207,249,251,254,257,260],{"class":104,"line":250},6,[207,252,253],{"class":212},"  position",[207,255,256],{"class":216},": ",[207,258,259],{"class":212},"absolute",[207,261,262],{"class":216},";\n",[207,264,266,269],{"class":104,"line":265},7,[207,267,268],{"class":212},"  position-anchor",[207,270,226],{"class":216},[207,272,274,277,279,282,285],{"class":104,"line":273},8,[207,275,276],{"class":212},"  position-area",[207,278,256],{"class":216},[207,280,281],{"class":212},"bottom",[207,283,284],{"class":216}," span-right;   ",[207,286,288],{"class":287},"sLBg1","\u002F* below, aligned with the trigger's left edge *\u002F\n",[207,290,292,295,297,300,304,307],{"class":104,"line":291},9,[207,293,294],{"class":212},"  margin-block-start",[207,296,256],{"class":216},[207,298,299],{"class":212},"0.25",[207,301,303],{"class":302},"sHUrx","rem",[207,305,306],{"class":216},";         ",[207,308,309],{"class":287},"\u002F* a small gap from the anchor *\u002F\n",[207,311,313,316,318,321],{"class":104,"line":312},10,[207,314,315],{"class":212},"  inline-size",[207,317,256],{"class":216},[207,319,320],{"class":212},"max-content",[207,322,262],{"class":216},[207,324,326,329,331,334,336],{"class":104,"line":325},11,[207,327,328],{"class":212},"  max-inline-size",[207,330,256],{"class":216},[207,332,333],{"class":212},"16",[207,335,303],{"class":302},[207,337,262],{"class":216},[207,339,341],{"class":104,"line":340},12,[207,342,239],{"emptyLinePlaceholder":238},[207,344,346],{"class":104,"line":345},13,[207,347,348],{"class":287},"  \u002F* If there is no room below, try above; if no room to the right, mirror. *\u002F\n",[207,350,352,355],{"class":104,"line":351},14,[207,353,354],{"class":212},"  position-try-fallbacks",[207,356,357],{"class":216},": flip-block, flip-inline;\n",[207,359,361],{"class":104,"line":360},15,[207,362,232],{"class":216},[14,364,365,366,368,369,372,373,375,376,379,380,382],{},"There is no inset arithmetic at all. ",[18,367,39],{}," makes the panel's containing block the region below the anchor, starting at the anchor's left edge and extending to the right edge of the available space. The default alignment in a spanned area aligns the panel towards the anchor, so its left edge lines up with the trigger's left edge — exactly how a dropdown menu should sit. The margin adds a small gap without needing ",[18,370,371],{},"calc()"," on an ",[18,374,20],{}," value. Because the gap is a margin, it also flips automatically with the fallbacks: when ",[18,377,378],{},"flip-block"," moves the panel above the trigger, the browser mirrors the margin to the other side, so the gap stays between panel and anchor. With hand-written ",[18,381,20],{}," insets, that mirroring would need a second set of rules.",[56,384,386],{"id":385},"the-key-technique-span-keywords-for-dropdown-style-alignment","The key technique: span keywords for dropdown-style alignment",[14,388,389,390,393,394,397,398,401,402,405],{},"The three-cell rows and columns are fine for tooltips, which should centre on the anchor. Menus and selects usually want to align with one edge of the trigger and extend beyond it. That is what the ",[18,391,392],{},"span-"," keywords express: ",[18,395,396],{},"span-right"," covers the centre column and the right column, ",[18,399,400],{},"span-left"," the centre and left, and ",[18,403,404],{},"span-all"," all three.",[67,407,74,410,74,413,74,416,74,419,74,424,74,428,74,431,74,434,74,437,74,440,74,443,74,446,74,449,74,452,74,455,74,458,74,462,74,465],{"viewBox":408,"role":70,"ariaLabel":409,"xmlns":72,"style":73},"0 0 720 280","Three placements below an anchor: bottom center stays within the anchor's column, bottom span-right starts at the anchor's left edge and extends right, bottom span-all spans the full width",[76,411,412],{},"Centre, span one side, or span all",[80,414,415],{},"Three small diagrams, each with an anchor button and a highlighted area beneath it. Bottom center: the area is exactly the anchor's column, suited to tooltips. Bottom span-right: the area starts at the anchor's left edge and extends right, suited to dropdown menus. Bottom span-all: the area covers the full width below the anchor, suited to mega menus.",[84,417,418],{"textAnchor":86,"x":87,"y":88,"style":89},"Three ways to sit below an anchor",[92,420],{"x":421,"y":422,"width":421,"height":423,"rx":109,"fill":130,"opacity":102},"80","60","30",[92,425],{"x":421,"y":426,"width":421,"height":94,"rx":109,"fill":130,"opacity":427},"96","0.2",[92,429],{"x":430,"y":422,"width":421,"height":423,"rx":109,"fill":130,"opacity":102},"330",[92,432],{"x":430,"y":426,"width":433,"height":94,"rx":109,"fill":130,"opacity":427},"140",[92,435],{"x":436,"y":422,"width":421,"height":423,"rx":109,"fill":130,"opacity":102},"580",[92,438],{"x":439,"y":426,"width":133,"height":94,"rx":109,"fill":130,"opacity":427},"530",[84,441,135],{"textAnchor":86,"x":94,"y":421,"style":442},"text-anchor:middle;fill:currentColor;font:11px sans-serif",[84,444,135],{"textAnchor":86,"x":445,"y":421,"style":442},"370",[84,447,135],{"textAnchor":86,"x":448,"y":421,"style":442},"620",[84,450,161],{"textAnchor":86,"x":94,"y":451,"style":140},"244",[84,453,39],{"textAnchor":86,"x":454,"y":451,"style":140},"400",[84,456,457],{"textAnchor":86,"x":448,"y":451,"style":140},"bottom span-all",[84,459,461],{"textAnchor":86,"x":94,"y":460,"style":442},"160","tooltip",[84,463,464],{"textAnchor":86,"x":454,"y":460,"style":442},"dropdown",[84,466,467],{"textAnchor":86,"x":448,"y":460,"style":442},"mega menu",[56,469,471],{"id":470},"logical-and-self-relative-keywords","Logical and self-relative keywords",[14,473,474,475,33,477,33,479,482,483,486,487,33,490,33,493,33,496,499,500,503,504,507,508,511],{},"The physical keywords ",[18,476,32],{},[18,478,281],{},[18,480,481],{},"left"," and ",[18,484,485],{},"right"," have logical equivalents that follow the writing mode: ",[18,488,489],{},"block-start",[18,491,492],{},"block-end",[18,494,495],{},"inline-start",[18,497,498],{},"inline-end",", and span variants such as ",[18,501,502],{},"span-inline-end",". In a right-to-left language, ",[18,505,506],{},"bottom span-inline-end"," places a dropdown aligned with the trigger's right edge and extending left — the correct mirror image — without a separate rule. For internationalised interfaces, the logical forms are the better default. There are also ",[18,509,510],{},"self-"," variants that resolve against the positioned element's own writing mode rather than its containing block's, which only matters in mixed-direction layouts.",[56,513,515],{"id":514},"fallbacks-with-position-area","Fallbacks with position-area",[14,517,518,519,522,523,525,526,529,530,532],{},"Because a single keyword pair describes a placement, fallbacks become short too. ",[18,520,521],{},"position-try-fallbacks"," accepts ",[18,524,378],{}," (mirror across the anchor vertically), ",[18,527,528],{},"flip-inline"," (mirror horizontally), their combination, or explicit ",[18,531,28],{}," values:",[198,534,536],{"className":200,"code":535,"language":202,"meta":203,"style":203},".tooltip {\n  position-area: top;\n  position-try-fallbacks: bottom, right, left;\n}\n",[18,537,538,545,555,573],{"__ignoreMap":203},[207,539,540,543],{"class":104,"line":209},[207,541,542],{"class":212},".tooltip",[207,544,217],{"class":216},[207,546,547,549,551,553],{"class":104,"line":220},[207,548,276],{"class":212},[207,550,256],{"class":216},[207,552,32],{"class":212},[207,554,262],{"class":216},[207,556,557,559,561,563,565,567,569,571],{"class":104,"line":229},[207,558,354],{"class":212},[207,560,256],{"class":216},[207,562,281],{"class":212},[207,564,33],{"class":216},[207,566,485],{"class":212},[207,568,33],{"class":216},[207,570,481],{"class":212},[207,572,262],{"class":216},[207,574,575],{"class":104,"line":235},[207,576,232],{"class":216},[14,578,579,580,584,585,589],{},"The browser tries each option in order when the current one would overflow the containing block, and uses the first that fits. ",[45,581,583],{"href":582},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips\u002F","Anchor-Positioned Tooltips That Flip"," builds a tooltip on this mechanism, and ",[45,586,588],{"href":587},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks\u002F","Anchor Positioning Fallbacks in CSS"," covers browsers without anchor positioning.",[56,591,593],{"id":592},"sizing-inside-the-area","Sizing inside the area",[14,595,596,597,599,600,603,604,607,608,610,611,613,614,616,617,619,620,623,624,627,628,631],{},"Because ",[18,598,28],{}," turns the chosen region into the element's containing block, percentage sizes and ",[18,601,602],{},"stretch"," behaviour resolve against that region, not the whole page. An element with ",[18,605,606],{},"inline-size: 100%"," in ",[18,609,457],{}," becomes as wide as the entire containing block below the anchor; in ",[18,612,161],{},", it becomes exactly as wide as the anchor. That is occasionally useful — a panel that should match the anchor's width can use ",[18,615,161],{}," with ",[18,618,606],{}," — but more often surprising. For content-sized overlays, set ",[18,621,622],{},"inline-size: max-content"," and a ",[18,625,626],{},"max-inline-size",", as the implementation does, so the element sizes to its content and never exceeds a readable measure. For panels that must match the trigger exactly regardless of area, ",[18,629,630],{},"anchor-size()"," is the explicit tool.",[14,633,634,635,637,638,640],{},"The region can also be smaller than the element. Placing a wide menu in ",[18,636,141],{}," when the anchor sits near the left edge of the page leaves only a sliver of space; the element overflows its area. That overflow is exactly what ",[18,639,521],{}," watches for, which is why placements and fallbacks are designed together.",[56,642,644],{"id":643},"common-mistakes","Common mistakes",[646,647,648,663,677,683],"ul",{},[649,650,651,655,656,658,659,662],"li",{},[652,653,654],"strong",{},"Forgetting absolute positioning."," ",[18,657,28],{}," only applies to absolutely or fixed-positioned elements. Without ",[18,660,661],{},"position: absolute"," (or the top-layer positioning a popover gets), the property does nothing.",[649,664,665,668,669,672,673,676],{},[652,666,667],{},"Duplicated anchor names."," If several triggers share ",[18,670,671],{},"anchor-name: --menu-trigger",", the positioned element attaches to the last one in the document. Give each trigger a unique name, or use ",[18,674,675],{},"anchor-scope"," to limit a name to a component subtree.",[649,678,679,682],{},[652,680,681],{},"Anchors the element cannot see."," The anchor must be laid out before the positioned element and must not be hidden inside a separate containment boundary. Top-layer elements such as popovers can anchor to almost anything, which is one reason popovers pair so well with anchor positioning.",[649,684,685,688,689,616,691,693],{},[652,686,687],{},"Mixing physical and logical keywords."," Combining ",[18,690,32],{},[18,692,502],{}," is invalid; use either physical or logical keywords for both axes.",[56,695,697],{"id":696},"when-anchor-is-still-the-right-tool","When anchor() is still the right tool",[14,699,700,702,703,705,706,708,709,711,712,714,715,719],{},[18,701,28],{}," covers placement relative to the anchor's box. Some layouts need more: an arrow that tracks the centre of the anchor while the tooltip is shifted, a connector line between two anchors, or an element sized between two different anchors. Those need the ",[18,704,20],{}," function in individual inset properties, sometimes combined with ",[18,707,630],{},". The two approaches mix freely: set ",[18,710,28],{}," for the overall placement and use ",[18,713,20],{}," or margins for the fine adjustments. ",[45,716,718],{"href":717},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths\u002F","anchor-size(): Overlays That Match Triggers"," covers sizing.",[56,721,723],{"id":722},"browser-support","Browser support",[14,725,726,728,729,482,732,735,736,738,739,742],{},[18,727,28],{}," is supported in Chrome and Edge 129+, Firefox 147+ and Safari 26+. ",[18,730,731],{},"anchor-name",[18,733,734],{},"position-anchor"," are supported in Chrome and Edge 125+, Firefox 147+ and Safari 26+, and ",[18,737,521],{}," in Chrome and Edge 128+, Firefox 147+ and Safari 26+. Some Chromium versions shipped this property under an earlier name, ",[18,740,741],{},"inset-area",", before the rename; the current name is the one to use. In browsers without anchor positioning, the panel falls back to ordinary absolute positioning, so provide a baseline placement with regular insets or use the popover's default centring.",[56,744,746],{"id":745},"faq","FAQ",[14,748,749,752,753,756],{},[652,750,751],{},"What is position-area?","\nA property for anchor-positioned elements that places them in one or more cells of a 3 by 3 grid formed around the anchor. ",[18,754,755],{},"position-area: top center"," puts the element above the anchor, horizontally centred, without writing any inset arithmetic.",[14,758,759,762,764,765,767,768,192],{},[652,760,761],{},"What is the difference between position-area and the anchor() function?",[18,763,20],{}," returns a specific edge coordinate of the anchor for use in inset properties, which gives precise control but needs more code. ",[18,766,28],{}," picks a region of the grid and handles sizing and default alignment for you. Most overlays only need ",[18,769,28],{},[14,771,772,775,776,779],{},[652,773,774],{},"How do I make a dropdown span the anchor and the space to one side?","\nUse a span keyword, such as ",[18,777,778],{},"position-area: bottom span-right",". The element's area starts at the anchor's column and extends into the column to its right, so it aligns with the anchor's left edge and can grow rightwards.",[14,781,782,785,786,522,788,790],{},[652,783,784],{},"Does position-area work with position-try fallbacks?","\nYes. ",[18,787,521],{},[18,789,28],{}," values and flip keywords, so an element placed at the top can fall back to the bottom when there is not enough room above the anchor.",[56,792,794],{"id":793},"related","Related",[646,796,797,802,807,812],{},[649,798,799,801],{},[45,800,48],{"href":47}," — the parent guide.",[649,803,804,806],{},[45,805,583],{"href":582}," — fallbacks in practice.",[649,808,809,811],{},[45,810,718],{"href":717}," — matching widths.",[649,813,814,818],{},[45,815,817],{"href":816},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking\u002F","Popover Light Dismiss, Nesting and Stacking"," — overlays in the top layer.",[820,821,822],"style",{},"html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":203,"searchDepth":220,"depth":220,"links":824},[825,826,827,828,829,830,831,832,833,834,835],{"id":58,"depth":220,"text":59},{"id":181,"depth":220,"text":182},{"id":385,"depth":220,"text":386},{"id":470,"depth":220,"text":471},{"id":514,"depth":220,"text":515},{"id":592,"depth":220,"text":593},{"id":643,"depth":220,"text":644},{"id":696,"depth":220,"text":697},{"id":722,"depth":220,"text":723},{"id":745,"depth":220,"text":746},{"id":793,"depth":220,"text":794},"Place anchored overlays with position-area instead of anchor() arithmetic: the 3×3 grid around an anchor, span keywords, logical values and default alignment.","md",{"pageTitle":5,"datePublished":839,"dateModified":839,"faq":840},"2026-09-18",[841,843,845,847],{"q":751,"a":842},"A property for anchor-positioned elements that places them in one or more cells of a 3 by 3 grid formed around the anchor. position-area: top center puts the element above the anchor, horizontally centred, without writing any inset arithmetic.",{"q":761,"a":844},"anchor() returns a specific edge coordinate of the anchor for use in inset properties, which gives precise control but needs more code. position-area picks a region of the grid and handles sizing and default alignment for you. Most overlays only need position-area.",{"q":774,"a":846},"Use a span keyword, such as position-area: bottom span-right. The element's area starts at the anchor's column and extends into the column to its right, so it aligns with the anchor's left edge and can grow rightwards.",{"q":784,"a":848},"Yes. position-try-fallbacks accepts position-area values and flip keywords, so an element placed at the top can fall back to the bottom when there is not enough room above the anchor.","\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained",{"title":5,"description":836},"mastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained\u002Findex","8TkLMHFrYhAgyFkXQzNkLS4OWCW8Klx9vJTEZvnCuiA",[854,857,860,863,866,869,872,875,878,881,884,887,890,893,896,899,902,905,908,911,914,917,920,923,926,929,932,935,938,941,944,947,950,953,956,959,962,965,968,971,974,977,980,983,986,989,992,995,998,1001,1004,1007,1010,1013,1016,1019,1022,1025,1028,1031,1034,1037,1040,1043,1046,1049,1052,1055,1058,1061,1064,1067,1070,1073,1076,1079,1082,1085,1088,1091,1094,1097,1100,1103,1106,1109,1112,1115,1118,1121,1124,1127,1130,1133,1136,1139,1142,1145,1148,1151,1153,1154,1157,1160,1163,1166,1169,1172,1175,1178,1181,1184,1187,1190,1193,1196,1199,1202,1205,1208,1211,1214,1217,1220,1223,1226,1229,1232,1235,1238,1241,1244,1247,1250,1253,1256,1259,1262,1265,1268,1271,1273,1276,1279,1282,1285,1288,1291,1294,1297,1300,1303,1306,1309,1312,1315,1318,1321,1324,1327,1330,1333,1336,1339,1342,1345,1348,1351,1354,1357,1360,1363,1366,1369,1372,1375,1378,1381,1384,1387,1390,1393,1396,1399,1402,1405,1408],{"path":855,"title":856},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fcreating-accessible-focus-indicators","Creating Accessible Focus Indicators: Building a Ring That Survives Any Background",{"path":858,"title":859},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":861,"title":862},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":864,"title":865},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":867,"title":868},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fpause-controls-for-looping-animations","Pause Controls for Looping CSS Animations: Meeting WCAG 2.2.2",{"path":870,"title":871},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":873,"title":874},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css","Reducing Motion Preferences in CSS: How the Setting Becomes a Media Feature",{"path":876,"title":877},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Ftarget-size-and-pointer-accessibility","Target Size and Pointer Accessibility: Meeting 2.5.8 Without Redesigning",{"path":879,"title":880},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":882,"title":883},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":885,"title":886},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fanimated-gradient-borders-with-property","Animated Gradient Borders With @property: A Spinning Highlight Without Extra Elements",{"path":888,"title":889},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations","Clip-Path Reveal Animations: Wipes, Irises and Corners Without Extra Markup",{"path":891,"title":892},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":894,"title":895},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmask-image-fade-edges","Fading Edges With mask-image: Soft Boundaries That Work on Any Background",{"path":897,"title":898},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmorphing-shapes-with-clip-path-polygon","Morphing Shapes With clip-path: polygon(): Point-Matched Transitions",{"path":900,"title":901},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":903,"title":904},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fcolor-mix-hover-states","Hover and Active States With color-mix(): One Token, Every Shade",{"path":906,"title":907},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":909,"title":910},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Flight-dark-function-for-themes","Light and Dark Themes With light-dark(): One Declaration per Colour",{"path":912,"title":913},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":915,"title":916},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":918,"title":919},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":921,"title":922},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":924,"title":925},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":927,"title":928},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-that-scales-with-container-size","Motion That Scales with Container Size: cqi, cqb, and Derived Durations",{"path":930,"title":931},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":933,"title":934},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":936,"title":937},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":939,"title":940},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":942,"title":943},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwhen-to-use-javascript-animation","When to Use JavaScript Instead of CSS for Animation",{"path":945,"title":946},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fanimating-custom-properties-with-at-property","Animating Custom Properties with @property: Typed Variables That Interpolate",{"path":948,"title":949},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":951,"title":952},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":954,"title":955},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":957,"title":958},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety","Registered Properties and Type Safety: @property as a Contract for Design Tokens",{"path":960,"title":961},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":963,"title":964},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":966,"title":967},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":969,"title":970},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":972,"title":973},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":975,"title":976},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":978,"title":979},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":981,"title":982},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":984,"title":985},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":987,"title":988},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":990,"title":991},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":993,"title":994},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Finterpolate-size-for-height-auto-animation","Animating to height: auto With interpolate-size and calc-size()",{"path":996,"title":997},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":999,"title":1000},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":1002,"title":1003},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":1005,"title":1006},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":1008,"title":1009},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":1011,"title":1012},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Flinear-easing-function-for-springs","Spring and Bounce Easing With linear(): Physical Motion Without JavaScript",{"path":1014,"title":1015},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fsteps-easing-for-sprite-animations","steps() Easing: Sprite Sheets, Typewriters and Other Frame-by-Frame Effects",{"path":1017,"title":1018},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1020,"title":1021},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":1023,"title":1024},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-visible-vs-focus-polyfill-alternatives"," vs :focus: Why It Replaced the Focus-Ring Polyfill",{"path":1026,"title":1027},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1029,"title":1030},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fhover-intent-delays-with-transition-delay","Hover Intent Delays With transition-delay: Menus That Don't Flicker",{"path":1032,"title":1033},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1035,"title":1036},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries","Pointer and Hover Media Queries: Gating Affordances by Input Capability",{"path":1038,"title":1039},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fsmooth-hover-effects-without-javascript","Smooth Hover Effects Without JavaScript: CSS-Only Patterns for Modern UI",{"path":1041,"title":1042},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1044,"title":1045},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":1047,"title":1048},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-fill-mode-explained","animation-fill-mode: What an Animation Applies Before and After It Runs",{"path":1050,"title":1051},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1053,"title":1054},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1056,"title":1057},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-loading-spinners-and-skeletons","CSS-Only Loading Spinners and Skeleton Shimmer Screens with @keyframes",{"path":1059,"title":1060},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-toggle-switches-and-checkboxes","CSS-Only Toggle Switches and Checkboxes That Keep the Native Input",{"path":1062,"title":1063},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1065,"title":1066},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":1068,"title":1069},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1071,"title":1072},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":1074,"title":1075},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":1077,"title":1078},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":1080,"title":1081},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1083,"title":1084},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1086,"title":1087},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fprofiling-animations-in-devtools","Profiling CSS Animations in DevTools: Finding the Frame That Costs Too Much",{"path":1089,"title":1090},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fwill-change-and-the-compositor-thread","will-change and the Compositor Thread: Layer Promotion Without the Footguns",{"path":1092,"title":1093},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1095,"title":1096},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1098,"title":1099},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":1101,"title":1102},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1104,"title":1105},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1107,"title":1108},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":1110,"title":1111},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":1113,"title":1114},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":1116,"title":1117},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1119,"title":1120},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fsame-document-view-transitions","Writing a Same-Document View Transition: the CSS You Actually Author",{"path":1122,"title":1123},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-names-shared-elements","view-transition-name and Shared Elements: Morphing a Thumbnail into a Hero",{"path":1125,"title":1126},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":1128,"title":1129},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":1131,"title":1132},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":1134,"title":1135},"\u002F","Modern CSS Layouts & Micro-Interactions",{"path":1137,"title":1138},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1140,"title":1141},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1143,"title":1144},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":1146,"title":1147},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1149,"title":1150},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1152,"title":817},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking",{"path":849,"title":5},{"path":1155,"title":1156},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":1158,"title":1159},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1161,"title":1162},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1164,"title":1165},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1167,"title":1168},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":1170,"title":1171},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":1173,"title":1174},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-queries-inside-css-nesting","Container Queries Inside CSS Nesting: Keeping Responses Next to the Styles They Change",{"path":1176,"title":1177},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":1179,"title":1180},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-units-cqi-cqb-explained","Container Query Units Explained: cqi, cqb, cqw, cqh, cqmin and cqmax",{"path":1182,"title":1183},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1185,"title":1186},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1188,"title":1189},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools","Debugging Container Queries in DevTools: Why a Rule Doesn't Match",{"path":1191,"title":1192},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fhow-to-use-container-queries-in-production","How to Use Container Queries in Production Without a Rewrite",{"path":1194,"title":1195},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":1197,"title":1198},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1200,"title":1201},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1203,"title":1204},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fbuilding-a-dashboard-with-subgrid","Building a Responsive Dashboard Where Cards Align with Subgrid",{"path":1206,"title":1207},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":1209,"title":1210},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-template-areas-responsive-layouts","Responsive Layouts With grid-template-areas: Rearranging Regions by Name",{"path":1212,"title":1213},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fholy-grail-layout-with-grid","The Holy-Grail Layout with CSS Grid and Container Queries",{"path":1215,"title":1216},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1218,"title":1219},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fmasonry-style-layouts-with-grid","Masonry-Style Layouts With the CSS That Ships Today",{"path":1221,"title":1222},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Foverlapping-elements-with-grid-stacking","Overlapping Elements With Grid Stacking: Layers Without position: absolute",{"path":1224,"title":1225},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1227,"title":1228},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fcentering-in-css-every-method","Centering in CSS: Every Modern Method and When Each One Breaks",{"path":1230,"title":1231},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-basis-vs-width","flex-basis vs width: Which Size a Flex Item Actually Starts From",{"path":1233,"title":1234},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":1236,"title":1237},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":1239,"title":1240},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":1242,"title":1243},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":1245,"title":1246},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fsticky-footer-with-flexbox-and-grid","Sticky Footer With Flexbox or Grid: Pinning the Footer on Short Pages",{"path":1248,"title":1249},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fclamp-vs-media-query-typography","clamp() Fluid Type vs Media-Query Step Typography: Tradeoffs and Anatomy",{"path":1251,"title":1252},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":1254,"title":1255},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-line-height-and-measure","Fluid Line Height and Measure: Keeping Text Readable as It Scales",{"path":1257,"title":1258},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-space-scale-with-clamp","Building a Fluid Spacing Scale with clamp() and Container Units",{"path":1260,"title":1261},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1263,"title":1264},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1266,"title":1267},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1269,"title":1270},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ftext-wrap-balance-and-pretty","text-wrap: balance and pretty: Better Line Breaks Without Manual Breaks",{"path":1272,"title":53},"\u002Fmastering-container-queries-responsive-layouts",{"path":1274,"title":1275},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1277,"title":1278},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fcontent-visibility-and-contain-intrinsic-size","content-visibility and contain-intrinsic-size: Rendering Only What Is Near the Screen",{"path":1280,"title":1281},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1283,"title":1284},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Flayout-widths-with-min-max-clamp","Layout Widths With min(), max() and clamp(): Sizing Without Breakpoints",{"path":1286,"title":1287},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1289,"title":1290},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":1292,"title":1293},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":1295,"title":1296},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1298,"title":1299},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":1301,"title":1302},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":1304,"title":1305},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1307,"title":1308},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Frevert-layer-and-revert-keywords","initial, inherit, unset, revert and revert-layer: Undoing Styles Correctly",{"path":1310,"title":1311},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":1313,"title":1314},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fcontent-aware-card-layouts-with-has","Content-Aware Card Layouts With :has(): One Component, Many Shapes",{"path":1316,"title":1317},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":1319,"title":1320},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fform-validation-layouts-with-has","Form Validation Layouts With :has(): Styling Groups From Field State",{"path":1322,"title":1323},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-selector-performance",":has() Selector Performance: What Is Cheap, What Is Not, and How to Measure",{"path":1325,"title":1326},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-vs-container-style-queries",":has() vs Container Style Queries: Discovered State and Published State",{"path":1328,"title":1329},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":1331,"title":1332},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fquantity-queries-with-has","Quantity Queries With :has(): Layouts That Respond to How Many Items There Are",{"path":1334,"title":1335},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fbuilding-responsive-cards-with-container-queries","Building Responsive Cards with Container Queries: A Production-Ready Guide",{"path":1337,"title":1338},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":1340,"title":1341},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":1343,"title":1344},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":1346,"title":1347},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":1349,"title":1350},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":1352,"title":1353},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":1355,"title":1356},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":1358,"title":1359},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":1361,"title":1362},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":1364,"title":1365},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fhorizontal-scrolling-card-rows","Horizontal Scrolling Card Rows: Swipeable Lists That Stay in Their Lane",{"path":1367,"title":1368},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":1370,"title":1371},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Foverscroll-behavior-for-nested-scrolling","overscroll-behavior: Taming Nested Scrolling, Pull-to-Refresh and Back-Swipe",{"path":1373,"title":1374},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fscroll-margin-and-scroll-padding-for-sticky-headers","scroll-margin and scroll-padding: Keeping Targets Clear of Sticky Headers",{"path":1376,"title":1377},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":1379,"title":1380},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming","Container Style Query Theming: One Token Instead of a Variant Class Matrix",{"path":1382,"title":1383},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":1385,"title":1386},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-queries-with-custom-properties","Style Queries With Custom Properties: Declaring, Inheriting, and Matching Tokens",{"path":1388,"title":1389},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":1391,"title":1392},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support","Style Query Fallbacks and Support: Designing for Older Browser Versions",{"path":1394,"title":1395},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fdvh-svh-lvh-mobile-viewport-units","dvh, svh and lvh: Choosing the Right Mobile Viewport Unit",{"path":1397,"title":1398},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts","Full-Bleed Sections in a Constrained Layout: Breaking Out Without Breaking the Page",{"path":1400,"title":1401},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":1403,"title":1404},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fsafe-area-insets-for-notched-screens","Safe Area Insets: Designing Around Notches, Corners and Home Indicators",{"path":1406,"title":1407},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fviewport-units-vs-container-units","Viewport Units vs Container Units: Choosing the Right Reference Box",{"path":1409,"title":1410},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":1412,"caption":1413,"height":1414,"html":1415,"css":1416},"Moving a panel around the position-area grid","Pick a value to place the panel in that region of the grid around the button. Browsers without anchor positioning show the panel in its fallback position under the controls.",360,"\n\u003Cdiv class=\"demo\">\n  \u003Cfieldset class=\"opts\">\n    \u003Clegend>position-area\u003C\u002Flegend>\n    \u003Clabel>\u003Cinput type=\"radio\" name=\"pa\" value=\"bsr\" checked> bottom span-right\u003C\u002Flabel>\n    \u003Clabel>\u003Cinput type=\"radio\" name=\"pa\" value=\"top\"> top\u003C\u002Flabel>\n    \u003Clabel>\u003Cinput type=\"radio\" name=\"pa\" value=\"right\"> right\u003C\u002Flabel>\n    \u003Clabel>\u003Cinput type=\"radio\" name=\"pa\" value=\"bl\"> bottom left\u003C\u002Flabel>\n    \u003Clabel>\u003Cinput type=\"radio\" name=\"pa\" value=\"tr\"> top right\u003C\u002Flabel>\n  \u003C\u002Ffieldset>\n  \u003Cdiv class=\"stage\">\n    \u003Cbutton class=\"trigger\" type=\"button\">Anchor\u003C\u002Fbutton>\n    \u003Cdiv class=\"panel\">Anchored panel\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>","\n.demo { display: grid; gap: 0.75rem; padding: 1rem; }\n.opts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; border: 1px solid var(--demo-border); border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.85rem; }\n.opts legend { font-size: 0.8rem; color: var(--demo-muted); padding-inline: 0.25rem; }\n.stage { position: relative; min-block-size: 13rem; display: grid; place-items: center; border: 1px dashed var(--demo-border); border-radius: 10px; }\n.trigger { anchor-name: --demo-trigger; font: inherit; font-weight: 600; padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--demo-accent); background: var(--demo-surface); color: var(--demo-fg); }\n.panel { position: absolute; position-anchor: --demo-trigger; position-area: bottom span-right; margin: 0.25rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: var(--demo-accent); color: #fff; font-size: 0.85rem; inline-size: max-content; }\n.demo:has([value=\"top\"]:checked) .panel { position-area: top; }\n.demo:has([value=\"right\"]:checked) .panel { position-area: right; }\n.demo:has([value=\"bl\"]:checked) .panel { position-area: bottom left; }\n.demo:has([value=\"tr\"]:checked) .panel { position-area: top right; }",1789717744838]