CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Anchor Positioning</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 82ce88815, updated Thu Sep 7 16:33:55 2023 -0700" name="generator"> <link href="https://www.w3.org/TR/css-anchor-position-1/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <style> /* Put nice boxes around each algorithm. */ [data-algorithm]:not(.heading) { padding: .5em; border: thin solid #ddd; border-radius: .5em; margin: .5em calc(-0.5em - 1px); } [data-algorithm]:not(.heading) > :first-child { margin-top: 0; } [data-algorithm]:not(.heading) > :last-child { margin-bottom: 0; } [data-algorithm] [data-algorithm] { margin: 1em 0; } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { white-space: pre; display: inline-block; max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: .5em; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; } .dfn-paneled[role="button"] { cursor: pointer; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { white-space: pre; display: inline-block; max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: .5em; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; } .dfn-paneled[role="button"] { cursor: pointer; } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ pre.idl.highlight { background: var(--borderedblock-bg, var(--def-bg)); } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-var-click-highlighting */ /* Colors were chosen in Lab using https://nixsensor.com/free-color-converter/ D50 2deg illuminant, L in [0,100], a and b in [-128, 128] 0 = lab(85,0,85) 1 = lab(85,80,30) 2 = lab(85,-40,40) 3 = lab(85,-50,0) 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) */ var { cursor: pointer; } var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <style type='text/css'></style><body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Anchor Positioning</h1> <a href="https://www.w3.org/standards/types#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2024-04-08">8 April 2024</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/css-anchor-position-1/">https://drafts.csswg.org/css-anchor-position-1/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-anchor-position-1/">https://www.w3.org/TR/css-anchor-position-1/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-anchor-position-1">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (Google) <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple) <dd class="editor p-author h-card vcard" data-editor-id="73001">Ian Kilpatrick (Google) <dt class="editor">Former Editor: <dd class="editor p-author h-card vcard" data-editor-id="137616"><a class="p-name fn u-url url" href="https://twitter.com/jh3yy">Jhey Tompkins</a> (Google) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-anchor-position-1/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This specification defines 'anchor positioning', where a positioned element can size and position itself relative to one or more "anchor elements" elsewhere on the page. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-anchor-position” in the title, like this: “[css-anchor-position] …summary of comment…”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-anchor-position%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/2023/Process-20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li><a href="#intro">1 Introduction</a> <li> <a href="#determining">2 Determining the Anchor</a> <ol class="toc"> <li> <a href="#name">2.1 Creating an Anchor: the anchor-name property</a> <ol class="toc"> <li><a href="#implicit">2.1.1 Implicit Anchor Elements</a> </ol> <li><a href="#anchor-scope">2.2 Scoping Anchor Names: the anchor-scope property</a> <li><a href="#target">2.3 Finding an Anchor</a> <li><a href="#position-anchor">2.4 Default Anchors: the position-anchor property</a> <li><a href="#anchor-relevance">2.5 Anchor Relevance</a> </ol> <li> <a href="#positioning">3 Anchor-Based Positioning</a> <ol class="toc"> <li> <a href="#inset-area">3.1 The inset-area Property</a> <ol class="toc"> <li><a href="#resolving-spans">3.1.1 Resolving <span class="production" title="Expands to: block-end | block-self-end | block-self-start | block-start | bottom | center | end | inline-end | inline-self-end | inline-self-start | inline-start | left | right | self-end | self-start | span-all | span-block-end | span-block-start | span-bottom | span-end | span-inline-end | span-inline-start | span-start | span-top | span-x-end | span-x-start | span-y-end | span-y-start | start | top | x-end | x-self-end | x-self-start | x-start | y-end | y-self-end | y-self-start | y-start"><inset-area>s</a> </ol> <li><a href="#anchor-pos">3.2 The anchor() Function</a> <li><a href="#anchor-center">3.3 Centering on the Anchor: the anchor-center value</a> <li><a href="#scroll">3.4 Taking Scroll Into Account</a> <li><a href="#anchor-valid">3.5 Validity</a> <li><a href="#position-visibility">3.6 Conditional Hiding: the position-visibility property</a> </ol> <li> <a href="#sizing">4 Anchor-Based Sizing</a> <ol class="toc"> <li><a href="#anchor-size-fn">4.1 The anchor-size() Function</a> <li><a href="#anchor-size-valid">4.2 Validity</a> </ol> <li> <a href="#fallback">5 Overflow Management</a> <ol class="toc"> <li><a href="#position-try-options">5.1 Giving Fallback Options: the position-try-options property</a> <li><a href="#position-try-order-property">5.2 Determining Fallback Order: the position-try-order property</a> <li><a href="#position-try-prop">5.3 The position-try Shorthand</a> <li><a href="#fallback-rule">5.4 The @position-try Rule</a> <li><a href="#fallback-apply">5.5 Applying Position Fallback</a> </ol> <li> <a href="#interfaces">6 DOM Interfaces</a> <ol class="toc"> <li><a href="#om-position-try">6.1 The CSSPositionTryRule interface</a> </ol> <li><a href="#interleaving">7 Appendix: Style & Layout Interleaving</a> <li><a href="#sec">8 Security Considerations</a> <li><a href="#priv">9 Privacy Considerations</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> <li><a href="#idl-index"> IDL Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position">absolute positioning</a> allows authors to place elements anywhere on the page, without regard to the layout of other elements besides their containing block. This flexibility can be very useful, but also very limiting—often you want to position relative to some other element. <dfn data-dfn-type="dfn" data-export id="anchor-positioning">Anchor positioning<a class="self-link" href="#anchor-positioning"></a></dfn> (via the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="anchor-functions">anchor functions</dfn> <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor">anchor()</a> and <a class="css" data-link-type="maybe" href="#funcdef-anchor-size" id="ref-for-funcdef-anchor-size">anchor-size()</a>) allows authors to achieve this, "anchoring" an absolutely-positioned element to one or more other elements on the page, while also allowing them to try several possible positions to find the "best" one that avoids overlap/overflow. For example, an author might want to position a tooltip centered and above the targeted element, unless that would place the tooltip offscreen, in which case it should be below the targeted element. This can be done with the following CSS: <div class="example" id="example-880ca553"> <a class="self-link" href="#example-880ca553"></a> <pre class="lang-css highlight">.anchor <c- p>{</c-> <c- k>anchor-name</c-><c- p>:</c-> --tooltip<c- p>;</c-> <c- p>}</c-> .tooltip <c- p>{</c-> <c- c>/* Fixpos means we don’t need to worry about</c-> <c- c> containing block relationships;</c-> <c- c> the tooltip can live anywhere in the DOM. */</c-> position: fixed<c- p>;</c-> <c- c>/* All the anchoring behavior will default to</c-> <c- c> referring to the --tooltip anchor. */</c-> position-anchor: --tooltip<c- p>;</c-> <c- c>/* Align the tooltip’s bottom to the top of the anchor;</c-> <c- c> this also defaults to horizontally center-aligning</c-> <c- c> the tooltip and the anchor (in horizontal writing modes). */</c-> inset-area: block-start<c- p>;</c-> <c- c>/* Automatically swap if this overflows the window</c-> <c- c> so the tooltip’s top aligns to the anchor’s bottom</c-> <c- c> instead. */</c-> position-try: flip-block<c- p>;</c-> <c- c>/* Prevent getting too wide */</c-> max-inline-size: <c- m>20</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> </pre> </div> <h2 class="heading settled" data-level="2" id="determining">2. Determining the Anchor<a class="self-link" href="#determining"></a></h2> <h3 class="heading settled" data-level="2.1" id="name">2.1. Creating an Anchor: the <a class="property css" data-link-type="property" href="#propdef-anchor-name" id="ref-for-propdef-anchor-name">anchor-name</a> property<a class="self-link" href="#name"></a></h3> <table class="def propdef" data-link-for-hint="anchor-name"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-anchor-name">anchor-name</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident"><dashed-ident></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements that generate a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#principal-box" id="ref-for-principal-box">principal box</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> The <a class="property css" data-link-type="property" href="#propdef-anchor-name" id="ref-for-propdef-anchor-name①">anchor-name</a> property declares that an element is an <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="anchor" data-noexport id="anchor-element">anchor element</dfn>, and gives it a list of <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="anchor name" data-noexport id="anchor-name">anchor names</dfn> to be targeted by. Values are defined as follows: <dl> <dt data-md><dfn class="css" data-dfn-for="anchor-name" data-dfn-type="value" data-export id="valdef-anchor-name-none">none<a class="self-link" href="#valdef-anchor-name-none"></a></dfn> <dd data-md> The property has no effect. <dt data-md><dfn class="css" data-dfn-for="anchor-name" data-dfn-type="value" data-export id="valdef-anchor-name-dashed-ident"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident①"><dashed-ident></a>#<a class="self-link" href="#valdef-anchor-name-dashed-ident"></a></dfn> <dd data-md> If the element generates a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#principal-box" id="ref-for-principal-box①">principal box</a>, the element is an <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element">anchor element</a>, with a list of <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name">anchor names</a> as specified. Each anchor name is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name" id="ref-for-css-tree-scoped-name">tree-scoped name</a>. Otherwise, the property has no effect. </dl> <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name②">Anchor names</a> do not need to be unique. Not all elements are capable of being <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①">anchor elements</a> for a given positioned element, so a name can be reused in multiple places if the usages are scoped appropriately. Note: If multiple elements share an <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name③">anchor name</a> and are all visible to a given positioned element, the <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element">target anchor element</a> will be the last one in DOM order. <a class="property css" data-link-type="property" href="#propdef-anchor-scope" id="ref-for-propdef-anchor-scope">anchor-scope</a> can be used to limit what names are visible to a given element. <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name④">Anchor names</a> are not scoped by <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#containment" id="ref-for-containment">containment</a> by default; even if an element has <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#style-containment" id="ref-for-style-containment">style</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#layout-containment" id="ref-for-layout-containment">layout containment</a> (or any similar sort of containment), the anchor names of its descendants are visible to elements elsewhere in the page. Note: While an element is in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#skips-its-contents" id="ref-for-skips-its-contents">skipped contents</a> of another element (due to <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-contain-3/#propdef-content-visibility" id="ref-for-propdef-content-visibility">content-visibility: hidden</a>, for instance), it’s not an <a data-link-type="dfn" href="#acceptable-anchor-element" id="ref-for-acceptable-anchor-element">acceptable anchor element</a>, effectively acting as if it had no names. <h4 class="heading settled" data-level="2.1.1" id="implicit">2.1.1. Implicit Anchor Elements<a class="self-link" href="#implicit"></a></h4> Some specifications can define that, in certain circumstances, a particular element is an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="implicit-anchor-element">implicit anchor element</dfn> for a given positioned element. <a class="self-link" href="#example-e6312e6e"></a> TODO fill in new popover-related details. This makes the declared element the <a data-link-type="dfn" href="#implicit-anchor-element" id="ref-for-implicit-anchor-element">implicit anchor element</a> for the element with the attribute. <a data-link-type="dfn" href="#implicit-anchor-element" id="ref-for-implicit-anchor-element①">Implicit anchor elements</a> can be referenced with the <a class="css" data-link-type="maybe" href="#valdef-anchor-implicit" id="ref-for-valdef-anchor-implicit">implicit</a> keyword, rather than referring to some <a class="property css" data-link-type="property" href="#propdef-anchor-name" id="ref-for-propdef-anchor-name②">anchor-name</a> value. <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/selector.html#x22" id="ref-for-x22">Pseudo-elements</a> have the same <a data-link-type="dfn" href="#implicit-anchor-element" id="ref-for-implicit-anchor-element②">implicit anchor element</a> as their <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element">originating element</a>, unless otherwise specified. Note: Without this, these <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/selector.html#x22" id="ref-for-x22①">pseudo-elements</a>, which are often inaccessible by other specifications, cannot be positioned with <a data-link-type="dfn" href="#implicit-anchor-element" id="ref-for-implicit-anchor-element③">implicit anchor elements</a>. <h3 class="heading settled" data-level="2.2" id="anchor-scope">2.2. Scoping Anchor Names: the <a class="property css" data-link-type="property" href="#propdef-anchor-scope" id="ref-for-propdef-anchor-scope①">anchor-scope</a> property<a class="self-link" href="#anchor-scope"></a></h3> <table class="def propdef" data-link-for-hint="anchor-scope"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-anchor-scope">anchor-scope</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> all | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident②"><dashed-ident></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma①">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> This property scopes the specified <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name⑥">anchor names</a>, and lookups for these anchor names, to this element’s subtree. See <a href="#determining">§ 2 Determining the Anchor</a>. Values have the following meanings: <dl> <dt><dfn class="css" data-dfn-for="anchor-scope" data-dfn-type="value" data-export id="valdef-anchor-scope-none">none<a class="self-link" href="#valdef-anchor-scope-none"></a></dfn> <dd> No changes in <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name⑧">anchor name</a> scope. <dt><dfn class="css" data-dfn-for="anchor-scope" data-dfn-type="value" data-export id="valdef-anchor-scope-all">all<a class="self-link" href="#valdef-anchor-scope-all"></a></dfn> <dd> Specifies that all <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name⑨">anchor names</a> defined by this element or its descendants—whose scope is not already limited by a descendant using <a class="property css" data-link-type="property" href="#propdef-anchor-scope" id="ref-for-propdef-anchor-scope②">anchor-scope</a>—to be in scope only for this element’s descendants; and limits descendants to only match anchor names to <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element②">anchor elements</a> within this subtree. <dt><dfn class="css" data-dfn-for="anchor-scope" data-dfn-type="value" data-export id="valdef-anchor-scope-dashed-ident"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident③"><dashed-ident></a><a class="self-link" href="#valdef-anchor-scope-dashed-ident"></a></dfn> <dd> Specifies that a matching <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name①①">anchor name</a> defined by this element or its descendants—whose scope is not already limited by a descendant using <a class="property css" data-link-type="property" href="#propdef-anchor-scope" id="ref-for-propdef-anchor-scope③">anchor-scope</a>—to be in scope only for this element’s descendants; and limits descendants to only match these anchor names to <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element③">anchor elements</a> within this subtree. </dl> This property has no effect on <a data-link-type="dfn" href="#implicit-anchor-element" id="ref-for-implicit-anchor-element④">implicit anchor elements</a>. <div class="example" id="example-714bc97a"> <a class="self-link" href="#example-714bc97a"></a> When a design pattern is re-used, <a class="property css" data-link-type="property" href="#propdef-anchor-scope" id="ref-for-propdef-anchor-scope④">anchor-scope</a> can prevent naming clashes across identical components. For example, if a list contains positioned elements in each list item, which want to position themselves relative to the list item they’re in, <pre class="lang-css highlight">li <c- p>{</c-> <c- k>anchor-name</c-><c- p>:</c-> --list-item<c- p>;</c-> <c- k>anchor-scope</c-><c- p>:</c-> --list-item<c- p>;</c-> <c- p>}</c-> li .positioned <c- p>{</c-> <c- k>position</c-><c- p>:</c-> absolute<c- p>;</c-> <c- k>position-anchor</c-><c- p>:</c-> --list-item<c- p>;</c-> <c- k>inset-area</c-><c- p>:</c-> inline-start<c- p>;</c-> <c- p>}</c-> </pre> Without <a class="property css" data-link-type="property" href="#propdef-anchor-scope" id="ref-for-propdef-anchor-scope⑤">anchor-scope</a>, all of the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element" id="ref-for-the-li-element">li</a></code> elements would be visible to all of the positioned elements, and so they’d all positioned themselves relative to the final <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element" id="ref-for-the-li-element①">li</a></code>, stacking up on top of each other. </div> <h3 class="heading settled" data-level="2.3" id="target">2.3. Finding an Anchor<a class="self-link" href="#target"></a></h3> Several things in this specification find a <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element①">target anchor element</a>, given an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="anchor-specifier">anchor specifier</dfn>, which is either a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident④"><dashed-ident></a> (and a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference" id="ref-for-css-tree-scoped-reference">tree-scoped reference</a>) that should match an <a class="property css" data-link-type="property" href="#propdef-anchor-name" id="ref-for-propdef-anchor-name③">anchor-name</a> value elsewhere on the page, or the keyword <a class="css" data-link-type="maybe" href="#valdef-anchor-implicit" id="ref-for-valdef-anchor-implicit①">implicit</a>, or nothing (a missing specifier). <div class="algorithm" data-algorithm="target anchor element"> To determine the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="target-anchor-element">target <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element④">anchor element</a></dfn> given a querying element <var>query el</var> and an optional <a data-link-type="dfn" href="#anchor-specifier" id="ref-for-anchor-specifier">anchor specifier</a> <var>anchor spec</var>: <ol> <li data-md> If <var>anchor spec</var> was not passed, return the <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element②">target anchor element</a> for <var>query el</var> given the <var>query el</var>’s <a data-link-type="dfn" href="#default-anchor-specifier" id="ref-for-default-anchor-specifier">default anchor specifier</a>. <li data-md> If <var>anchor spec</var> is <a class="css" data-link-type="maybe" href="#valdef-anchor-implicit" id="ref-for-valdef-anchor-implicit②">implicit</a>: <ol> <li data-md> If the Popover API defines an <a data-link-type="dfn" href="#implicit-anchor-element" id="ref-for-implicit-anchor-element⑤">implicit anchor element</a> for <var>query el</var> which is an <a data-link-type="dfn" href="#acceptable-anchor-element" id="ref-for-acceptable-anchor-element①">acceptable anchor element</a> for <var>query el</var>, return that element. <li data-md> Otherwise, return nothing. </ol> Note: Future APIs might also define implicit anchor elements. When they do, they’ll be explicitly handled in this algorithm, to ensure coordination. <li data-md> Otherwise, <var>anchor spec</var> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident⑤"><dashed-ident></a>. Return the last element <var>el</var> in tree order that satisfies the following conditions: <ul> <li data-md> <var>el</var> is an <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element⑤">anchor element</a> with an <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name①③">anchor name</a> of <var>anchor spec</var>. <li data-md> <var>el</var>’s <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name①④">anchor name</a> and <var>anchor spec</var> are both associated with the same <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree" id="ref-for-concept-tree">tree</a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root">root</a>. Note: The <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name①⑤">anchor name</a> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name" id="ref-for-css-tree-scoped-name①">tree-scoped name</a>, while <var>anchor spec</var> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference" id="ref-for-css-tree-scoped-reference①">tree-scoped reference</a>. <li data-md> <var>el</var> is an <a data-link-type="dfn" href="#acceptable-anchor-element" id="ref-for-acceptable-anchor-element②">acceptable anchor element</a> for <var>query el</var>. </ul> If no element satisfies these conditions, return nothing. Note: <a class="property css" data-link-type="property" href="#propdef-anchor-scope" id="ref-for-propdef-anchor-scope⑥">anchor-scope</a> can restrict the visibility of certain <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name①⑥">anchor names</a>, which can affect what elements can be <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element⑥">anchor elements</a> for a given lookup. </ol> Note: The general rule captured by these conditions is that <var>el</var> must be fully laid out before <var>query el</var> is laid out. CSS’s rules about the layout order of stacking contexts give us assurances about this, and the list of conditions above exactly rephrases the stacking context rules into just what’s relevant for this purpose, ensuring there is no possibly circularity in anchor positioning. Note: An <a class="property css" data-link-type="property" href="#propdef-anchor-name" id="ref-for-propdef-anchor-name④">anchor-name</a> defined by styles in one <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree">shadow tree</a> won’t be seen by <a data-link-type="dfn" href="#anchor-functions" id="ref-for-anchor-functions">anchor functions</a> in styles in a different shadow tree, preserving encapsulation. However, elements in different shadow trees can still anchor to each other, so long as both the anchor-name and anchor function come from styles in the same tree, such as by using <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-shadow-parts-1/#selectordef-part" id="ref-for-selectordef-part">::part()</a> to style an element inside a shadow. (<a data-link-type="dfn" href="#implicit-anchor-element" id="ref-for-implicit-anchor-element⑥">Implicit anchor elements</a> also aren’t intrinsically limited to a single tree, but the details of that will depend on the API assigning them.) </div> <div class="algorithm" data-algorithm="acceptable anchor element"> An element <var>el</var> is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="acceptable-anchor-element">acceptable anchor element</dfn> for an <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position②">absolutely positioned</a> element <var>query el</var> if all of the following are true: <ul> <li data-md> Either <var>el</var> is a descendant of <var>query el</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block">containing block</a>, or <var>query el</var>’s containing block is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block">initial containing block</a>. <li data-md> If <var>el</var> has the same <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block②">containing block</a> as <var>query el</var>, then either <var>el</var> is not <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position③">absolutely positioned</a>, or <var>el</var> precedes <var>query el</var> in the tree order. <li data-md> If <var>el</var> has a different <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block③">containing block</a> from <var>query el</var>, then the last containing block in <var>el</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block-chain" id="ref-for-containing-block-chain">containing block chain</a> before reaching <var>query el</var>’s containing block is either not <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position④">absolutely positioned</a> or precedes <var>query el</var> in the tree order. <li data-md> <var>el</var> is either an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#elements" id="ref-for-elements">element</a>, or a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a> that acts like one. <a class="self-link" href="#issue-74e37020"></a> define the term that actually means this, matching ::before/after/backdrop/etc (but not ::marker/placeholder/etc whose box is not detectable). <li data-md> <var>el</var> is not in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#skips-its-contents" id="ref-for-skips-its-contents①">skipped contents</a> of another element. </ul> </div> <h3 class="heading settled" data-level="2.4" id="position-anchor">2.4. Default Anchors: the <a class="property css" data-link-type="property" href="#propdef-position-anchor" id="ref-for-propdef-position-anchor">position-anchor</a> property<a class="self-link" href="#position-anchor"></a></h3> <table class="def propdef" data-link-for-hint="position-anchor"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-position-anchor">position-anchor</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-anchor-element" id="ref-for-typedef-anchor-element"><anchor-element></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>implicit <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position⑤">absolutely positioned</a> elements <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> The <a class="property css" data-link-type="property" href="#propdef-position-anchor" id="ref-for-propdef-position-anchor①">position-anchor</a> property defines the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="default-anchor-specifier">default anchor specifier</dfn> for all <a data-link-type="dfn" href="#anchor-functions" id="ref-for-anchor-functions②">anchor functions</a> on the element, allowing multiple elements to use the same set of anchor functions (and <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list">position options lists</a>!) while changing which <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element⑦">anchor element</a> each is referring to. The <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element③">target anchor element</a> selected by the <a data-link-type="dfn" href="#default-anchor-specifier" id="ref-for-default-anchor-specifier①">default anchor specifier</a> (if one exists) is the element’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="default-anchor-element">default anchor element</dfn>. Its values are identical to the <a class="production css" data-link-type="type" href="#typedef-anchor-element" id="ref-for-typedef-anchor-element①"><anchor-element></a> term in <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor①">anchor()</a> and <a class="css" data-link-type="maybe" href="#funcdef-anchor-size" id="ref-for-funcdef-anchor-size①">anchor-size()</a>. <div class="example" id="example-e2ad92db"> <a class="self-link" href="#example-e2ad92db"></a> For example, in the following code both .foo and .bar elements can use the same positioning properties, just changing the anchor element they’re referring to: <pre class="highlight">.anchored <c- p>{</c-> <c- k>position</c-><c- p>:</c-> absolute<c- p>;</c-> <c- k>top</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>.5</c-><c- k>em</c-> + <c- nf>anchor</c-><c- p>(</c->outside<c- p>));</c-> <c- c>/* Since no anchor name was specified,</c-> <c- c> this automatically refers to the</c-> <c- c> default anchor element. */</c-> <c- p>}</c-> .foo.anchored <c- p>{</c-> <c- k>position-anchor</c-><c- p>:</c-> --foo<c- p>;</c-> <c- p>}</c-> .bar.anchored <c- p>{</c-> <c- k>position-anchor</c-><c- p>:</c-> --bar<c- p>;</c-> <c- p>}</c-> </pre> </div> <h3 class="heading settled" data-level="2.5" id="anchor-relevance">2.5. Anchor Relevance<a class="self-link" href="#anchor-relevance"></a></h3> As long as an <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element⑧">anchor element</a> is a <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element④">target anchor element</a> for any positioned element that is <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#relevant-to-the-user" id="ref-for-relevant-to-the-user">relevant to the user</a>, the anchor element is also relevant to the user. Note: This means that, for example, an anchor in a <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-contain-3/#propdef-content-visibility" id="ref-for-propdef-content-visibility①">content-visibility: auto</a> subtree will prevent its subtree from <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#skips-its-contents" id="ref-for-skips-its-contents②">skipping its contents</a> as long as the positioned element relying on it is <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#relevant-to-the-user" id="ref-for-relevant-to-the-user②">relevant to the user</a>. <h2 class="heading settled" data-level="3" id="positioning">3. Anchor-Based Positioning<a class="self-link" href="#positioning"></a></h2> An <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position⑥">absolutely-positioned</a> element can position itself relative to one or more <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①⓪">anchor elements</a> on the page. The <a class="property css" data-link-type="property" href="#propdef-inset-area" id="ref-for-propdef-inset-area">inset-area</a> function offers a convenient grid-based concept for positioning relative to the <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element">default anchor element</a>; for more complex positioning or positioning relative to multiple elements, the <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor②">anchor()</a> function can be used in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties">inset properties</a> to explicitly refer to edges of an <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①①">anchor element</a>. <h3 class="heading settled" data-level="3.1" id="inset-area">3.1. The <a class="property css" data-link-type="property" href="#propdef-inset-area" id="ref-for-propdef-inset-area①">inset-area</a> Property<a class="self-link" href="#inset-area"></a></h3> <table class="def propdef" data-link-for-hint="inset-area"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-area">inset-area</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> <a class="production css" data-link-type="type" href="#typedef-inset-area" id="ref-for-typedef-inset-area" title="Expands to: block-end | block-self-end | block-self-start | block-start | bottom | center | end | inline-end | inline-self-end | inline-self-start | inline-start | left | right | self-end | self-start | span-all | span-block-end | span-block-start | span-bottom | span-end | span-inline-end | span-inline-start | span-start | span-top | span-x-end | span-x-start | span-y-end | span-y-start | start | top | x-end | x-self-end | x-self-start | x-start | y-end | y-self-end | y-self-start | y-start"><inset-area></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>positioned elements with a <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element①">default anchor element</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>TBD </table> Most common use-cases of anchor positioning only need to worry about the edges of the positioned element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block⑥">containing block</a>, and the edges of the <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element②">default anchor element</a>. These lines can be thought of as defining a 3x3 grid; <a class="property css" data-link-type="property" href="#propdef-inset-area" id="ref-for-propdef-inset-area②">inset-area</a> lets you easily set up the positioned element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties①">inset properties</a> by specifying what area of this <a data-link-type="dfn" href="#inset-area-grid" id="ref-for-inset-area-grid">inset-area grid</a> you want the positioned element to be in. Its syntax is: <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-inset-area"><inset-area></dfn> = [ [ left <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> right <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> span-left <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> span-right <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> x-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> x-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> span-x-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> span-x-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> x-self-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> x-self-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> span-x-self-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> span-x-self-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> span-all ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> [ top <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> bottom <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> span-top <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> span-bottom <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> y-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a> y-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> span-y-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②④">|</a> span-y-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> y-self-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑥">|</a> y-self-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑦">|</a> span-y-self-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑧">|</a> span-y-self-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑨">|</a> span-all ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⓪">|</a> [ block-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③①">|</a> center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③②">|</a> block-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③③">|</a> span-block-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③④">|</a> span-block-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑤">|</a> span-all ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any①">||</a> [ inline-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑥">|</a> center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑦">|</a> inline-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑧">|</a> span-inline-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑨">|</a> span-inline-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⓪">|</a> span-all ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④①">|</a> [ self-block-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④②">|</a> self-block-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④③">|</a> span-self-block-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④④">|</a> span-self-block-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑤">|</a> span-all ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any②">||</a> [ self-inline-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑥">|</a> self-inline-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑦">|</a> span-self-inline-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑧">|</a> span-self-inline-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑨">|</a> span-all ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⓪">|</a> [ start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤①">|</a> center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤②">|</a> end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤③">|</a> span-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤④">|</a> span-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⑤">|</a> span-all ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⑥">|</a> [ self-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⑦">|</a> center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⑧">|</a> self-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⑨">|</a> span-self-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⓪">|</a> span-self-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥①">|</a> span-all ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range①">{1,2}</a> ] </pre> <dl> <dt data-md><dfn class="css" data-dfn-for="inset-area" data-dfn-type="value" data-export id="valdef-inset-area-none">none<a class="self-link" href="#valdef-inset-area-none"></a></dfn> <dd data-md> The property has no effect. <dt data-md><dfn class="css" data-dfn-for="inset-area" data-dfn-type="value" data-export id="valdef-inset-area-inset-area"><a class="production css" data-link-type="type" href="#typedef-inset-area" id="ref-for-typedef-inset-area①" title="Expands to: block-end | block-self-end | block-self-start | block-start | bottom | center | end | inline-end | inline-self-end | inline-self-start | inline-start | left | right | self-end | self-start | span-all | span-block-end | span-block-start | span-bottom | span-end | span-inline-end | span-inline-start | span-start | span-top | span-x-end | span-x-start | span-y-end | span-y-start | start | top | x-end | x-self-end | x-self-start | x-start | y-end | y-self-end | y-self-start | y-start"><inset-area></a><a class="self-link" href="#valdef-inset-area-inset-area"></a></dfn> <dd data-md> If the element does not have a <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element③">default anchor element</a>, or is not an <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position⑦">absolutely-positioned</a> element, this value has no effect. Otherwise, the property selects a region of the <a data-link-type="dfn" href="#inset-area-grid" id="ref-for-inset-area-grid①">inset-area grid</a>, and makes that the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block⑦">containing block</a>. Note: This means that the <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties②">inset properties</a> specify offsets from the inset-area, and some property values, like <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height" id="ref-for-propdef-max-height">max-height: 100%</a>, will be relative to the inset-area as well. Additionally, the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-normal" id="ref-for-valdef-align-self-normal">normal</a> value for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#self-alignment-properties" id="ref-for-self-alignment-properties">self-alignment properties</a> behaves as either <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start" id="ref-for-valdef-self-position-start">start</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end" id="ref-for-valdef-self-position-end">end</a>, or <a class="css" data-link-type="maybe" href="#valdef-justify-self-anchor-center" id="ref-for-valdef-justify-self-anchor-center">anchor-center</a>, depending on the positioning of the region, to give a good default alignment for the positioned element. See <a href="#resolving-spans">§ 3.1.1 Resolving <inset-area>s</a> for details on both of these effects. Also, any <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto">auto</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties③">inset properties</a> resolve to 0. </dl> <h4 class="heading settled" data-level="3.1.1" id="resolving-spans">3.1.1. Resolving <a class="production css" data-link-type="type" href="#typedef-inset-area" id="ref-for-typedef-inset-area②" title="Expands to: block-end | block-self-end | block-self-start | block-start | bottom | center | end | inline-end | inline-self-end | inline-self-start | inline-start | left | right | self-end | self-start | span-all | span-block-end | span-block-start | span-bottom | span-end | span-inline-end | span-inline-start | span-start | span-top | span-x-end | span-x-start | span-y-end | span-y-start | start | top | x-end | x-self-end | x-self-start | x-start | y-end | y-self-end | y-self-start | y-start"><inset-area></a>s<a class="self-link" href="#resolving-spans"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inset-area-grid">inset-area grid</dfn> is a 3x3 grid, composed of four grid lines in each axis. In order: <ul> <li data-md> the start edge of the element’s pre-modification <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block⑧">containing block</a>, or the anchor-start() edge of the <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element④">default anchor element</a> if that is more <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-start" id="ref-for-css-start">start</a>-ward <li data-md> the anchor(start) edge of the <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element⑤">default anchor element</a> <li data-md> the anchor(end) edge of the <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element⑥">default anchor element</a> <li data-md> the end edge of the element’s pre-modification <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block⑨">containing block</a>, or the anchor-start() edge fo the <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element⑦">default anchor element</a> if that is more <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-end" id="ref-for-css-end">end</a>-ward. </ul> An <a class="production css" data-link-type="type" href="#typedef-inset-area" id="ref-for-typedef-inset-area③" title="Expands to: block-end | block-self-end | block-self-start | block-start | bottom | center | end | inline-end | inline-self-end | inline-self-start | inline-start | left | right | self-end | self-start | span-all | span-block-end | span-block-start | span-bottom | span-end | span-inline-end | span-inline-start | span-start | span-top | span-x-end | span-x-start | span-y-end | span-y-start | start | top | x-end | x-self-end | x-self-start | x-start | y-end | y-self-end | y-self-start | y-start"><inset-area></a> selects a region of this grid by specifying the rows and columns the region occupies, with each of the two keywords specifying one of them: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-start">start</dfn>, <dfn class="dfn-paneled css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-end">end</dfn>, <dfn class="dfn-paneled css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-self-start">self-start</dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-self-end">self-end<a class="self-link" href="#valdef-inset-area-self-end"></a></dfn> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-top">top</dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-bottom">bottom<a class="self-link" href="#valdef-inset-area-bottom"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-left">left<a class="self-link" href="#valdef-inset-area-left"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-right">right<a class="self-link" href="#valdef-inset-area-right"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-y-start">y-start<a class="self-link" href="#valdef-inset-area-y-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-y-end">y-end<a class="self-link" href="#valdef-inset-area-y-end"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-y-self-start">y-self-start<a class="self-link" href="#valdef-inset-area-y-self-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-y-self-end">y-self-end<a class="self-link" href="#valdef-inset-area-y-self-end"></a></dfn> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-x-start">x-start</dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-x-end">x-end<a class="self-link" href="#valdef-inset-area-x-end"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-x-self-start">x-self-start<a class="self-link" href="#valdef-inset-area-x-self-start"></a></dfn>, <dfn class="dfn-paneled css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-x-self-end">x-self-end</dfn> <dt data-md><dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-block-start">block-start<a class="self-link" href="#valdef-inset-area-block-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-block-end">block-end<a class="self-link" href="#valdef-inset-area-block-end"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-block-self-start">block-self-start<a class="self-link" href="#valdef-inset-area-block-self-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-block-self-end">block-self-end<a class="self-link" href="#valdef-inset-area-block-self-end"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-inline-start">inline-start<a class="self-link" href="#valdef-inset-area-inline-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-inline-end">inline-end<a class="self-link" href="#valdef-inset-area-inline-end"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-inline-self-start">inline-self-start<a class="self-link" href="#valdef-inset-area-inline-self-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-inline-self-end">inline-self-end<a class="self-link" href="#valdef-inset-area-inline-self-end"></a></dfn> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-center">center</dfn> <dd data-md> The single corresponding row or column, depending on which axis this keyword is specifying. Like in <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor③">anchor()</a>, the plain logical keywords (<a class="css" data-link-type="maybe" href="#valdef-inset-area-start" id="ref-for-valdef-inset-area-start">start</a>, <a class="css" data-link-type="maybe" href="#valdef-inset-area-end" id="ref-for-valdef-inset-area-end">end</a>, etc) refer to the writing mode of the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①⓪">containing block</a>. The <a class="css" data-link-type="maybe" href="#valdef-inset-area-x-start" id="ref-for-valdef-inset-area-x-start">x-start</a>/etc determine their direction in the same way, but in the specified physical axis. The "self" logical keywords (<a class="css" data-link-type="maybe" href="#valdef-inset-area-self-start" id="ref-for-valdef-inset-area-self-start">self-start</a>, <a class="css" data-link-type="maybe" href="#valdef-inset-area-x-self-end" id="ref-for-valdef-inset-area-x-self-end">x-self-end</a>, etc) are identical, but refer to the element’s own writing mode. <dt data-md><dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-start">span-start<a class="self-link" href="#valdef-inset-area-span-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-end">span-end<a class="self-link" href="#valdef-inset-area-span-end"></a></dfn> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-top">span-top</dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-bottom">span-bottom<a class="self-link" href="#valdef-inset-area-span-bottom"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-y-start">span-y-start<a class="self-link" href="#valdef-inset-area-span-y-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-y-end">span-y-end<a class="self-link" href="#valdef-inset-area-span-y-end"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-x-start">span-x-start<a class="self-link" href="#valdef-inset-area-span-x-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-x-end">span-x-end<a class="self-link" href="#valdef-inset-area-span-x-end"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-block-start">span-block-start<a class="self-link" href="#valdef-inset-area-span-block-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-block-end">span-block-end<a class="self-link" href="#valdef-inset-area-span-block-end"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-inline-start">span-inline-start<a class="self-link" href="#valdef-inset-area-span-inline-start"></a></dfn>, <dfn class="css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-inline-end">span-inline-end<a class="self-link" href="#valdef-inset-area-span-inline-end"></a></dfn> <dd data-md> Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, <a class="css" data-link-type="maybe" href="#valdef-inset-area-span-top" id="ref-for-valdef-inset-area-span-top">span-top</a> spans the first two rows—the center row and the top row.) <dt data-md><dfn class="dfn-paneled css" data-dfn-for="inset-area, <inset-area>" data-dfn-type="value" data-export id="valdef-inset-area-span-all">span-all</dfn> <dd data-md> All three rows or columns, depending on which axis this keyword is specifying. </dl> Some keywords are ambiguous about what axis they refer to: <a class="css" data-link-type="maybe" href="#valdef-inset-area-center" id="ref-for-valdef-inset-area-center">center</a>, <a class="css" data-link-type="maybe" href="#valdef-inset-area-span-all" id="ref-for-valdef-inset-area-span-all">span-all</a>, and the <a class="css" data-link-type="maybe" href="#valdef-inset-area-start" id="ref-for-valdef-inset-area-start①">start</a>/etc keywords that don’t specify the block or inline axis explicitly. If the other keyword is unambiguous about its axis, then the ambiguous keyword is referring to the opposite axis. (For example, in block-start center, the center keyword is referring to the inline axis.) If both keywords are ambiguous, however, then the first refers to the block axis of the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①①">containing block</a>, and the second to the inline axis. (For example, span-all start is equivalent to span-all inline-start.) If only a single keyword is given, it behaves as if the second keyword is <a class="css" data-link-type="maybe" href="#valdef-inset-area-span-all" id="ref-for-valdef-inset-area-span-all①">span-all</a> if the given keyword is unambigous about its axis; otherwise, it behaves as if the given keyword was repeated. (For example, <a class="css" data-link-type="maybe" href="#valdef-inset-area-top" id="ref-for-valdef-inset-area-top">top</a> is equivalent to top span-all, but <a class="css" data-link-type="maybe" href="#valdef-inset-area-center" id="ref-for-valdef-inset-area-center②">center</a> is equivalent to center center.) <hr> The <a class="production css" data-link-type="type" href="#typedef-inset-area" id="ref-for-typedef-inset-area④" title="Expands to: block-end | block-self-end | block-self-start | block-start | bottom | center | end | inline-end | inline-self-end | inline-self-start | inline-start | left | right | self-end | self-start | span-all | span-block-end | span-block-start | span-bottom | span-end | span-inline-end | span-inline-start | span-start | span-top | span-x-end | span-x-start | span-y-end | span-y-start | start | top | x-end | x-self-end | x-self-start | x-start | y-end | y-self-end | y-self-start | y-start"><inset-area></a> also implies a default <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#self-align" id="ref-for-self-align">self-alignment</a>, which will be used if the <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#self-alignment-properties" id="ref-for-self-alignment-properties①">self-alignment property</a> on the element is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-normal" id="ref-for-valdef-align-self-normal①">normal</a>: <ul> <li data-md> If the inset area includes the center region in an axis the default alignment in that axis is <a class="css" data-link-type="maybe" href="#valdef-justify-self-anchor-center" id="ref-for-valdef-justify-self-anchor-center①">anchor-center</a>. <li data-md> Otherwise, it’s the opposite of the region it specifies: if it’s specifying the "start" region of its axis, the default alignment in that axis is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end" id="ref-for-valdef-self-position-end①">end</a>; etc. </ul> <div class="example" id="example-7921ad0f"> <a class="self-link" href="#example-7921ad0f"></a> For example, assuming an English-equivalent writing mode (horizontal-tb, ltr), then the value span-x-start top resolves to the "start" region of the vertical axis, and the "start" and "center" regions of the horizontal axis, so the default alignments will be <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" id="ref-for-propdef-align-self">align-self: end;</a> and <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" id="ref-for-propdef-justify-self">justify-self: anchor-center;</a> <figure> <img src="images/inset-area-example.png" width="400"> <figcaption> An example of <a class="css" data-link-type="propdesc" href="#propdef-inset-area" id="ref-for-propdef-inset-area③">inset-area: span-x-start top</a> positioning. </figcaption> </figure> </div> Note: When the <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element⑧">default anchor element</a> is partially or completely outside of the pre-modified <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①②">containing block</a>, some of the <a data-link-type="dfn" href="#inset-area-grid" id="ref-for-inset-area-grid②">inset-area grid’s</a> rows or columns can be zero-sized. <h3 class="heading settled" data-level="3.2" id="anchor-pos">3.2. The <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor④">anchor()</a> Function<a class="self-link" href="#anchor-pos"></a></h3> An <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position⑧">absolutely-positioned</a> element can use the <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-anchor">anchor()</dfn> function as a value in its <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties④">inset properties</a> to refer to the position of one or more <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①②">anchor elements</a>. The <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor⑤">anchor()</a> function resolves to a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value" title="Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | q | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw"><length></a>. <pre class="prod"><anchor()> = anchor( <a class="production" data-link-type="type" href="#typedef-anchor-element" id="ref-for-typedef-anchor-element②"><anchor-element></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a class="production" data-link-type="type" href="#typedef-anchor-side" id="ref-for-typedef-anchor-side"><anchor-side></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma">,</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> ) <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-anchor-element"><a class="production" data-link-type="type" href="#typedef-anchor-element" id="ref-for-typedef-anchor-element③"><anchor-element></a></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident⑥"><dashed-ident></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥②">|</a> implicit <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-anchor-side"><a class="production" data-link-type="type" href="#typedef-anchor-side" id="ref-for-typedef-anchor-side①"><anchor-side></a></dfn> = inside <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥③">|</a> outside <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥④">|</a> top <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⑤">|</a> left <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⑥">|</a> right <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⑦">|</a> bottom <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⑧">|</a> start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⑨">|</a> end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⓪">|</a> self-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦①">|</a> self-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦②">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦③">|</a> center </pre> The <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor⑥">anchor()</a> function has three arguments: <ul> <li data-md> the <a class="production css" data-link-type="type" href="#typedef-anchor-element" id="ref-for-typedef-anchor-element④"><anchor-element></a> value specifies how to find the <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①③">anchor element</a> it will be drawing positioning information from. If omitted, it behaves as the element’s <a data-link-type="dfn" href="#default-anchor-specifier" id="ref-for-default-anchor-specifier②">default anchor specifier</a>. Its possible values are: <dl> <dt data-md><dfn class="css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-dashed-ident"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident⑦"><dashed-ident></a><a class="self-link" href="#valdef-anchor-dashed-ident"></a></dfn> <dd data-md> Specifies the <a data-link-type="dfn" href="#anchor-name" id="ref-for-anchor-name①⑦">anchor name</a> it will look for. This name is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference" id="ref-for-css-tree-scoped-reference②">tree-scoped reference</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-implicit">implicit</dfn> <dd data-md> Selects the <a data-link-type="dfn" href="#implicit-anchor-element" id="ref-for-implicit-anchor-element⑦">implicit anchor element</a> defined for the element, if possible. </dl> See <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element⑤">target anchor element</a> for details. <li data-md> the <a class="production css" data-link-type="type" href="#typedef-anchor-side" id="ref-for-typedef-anchor-side②"><anchor-side></a> value refers to the position of the corresponding side of the <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element⑥">target anchor element</a>. Its possible values are: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-inside">inside</dfn> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-outside">outside</dfn> <dd data-md> Resolves to one of the <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①④">anchor element’s</a> sides, depending on which <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties⑤">inset property</a> it’s used in. <a class="css" data-link-type="maybe" href="#valdef-anchor-inside" id="ref-for-valdef-anchor-inside">inside</a> refers to the same side as the inset property (attaching the element to the "inside" of the anchor), while <a class="css" data-link-type="maybe" href="#valdef-anchor-outside" id="ref-for-valdef-anchor-outside">outside</a> refers to the opposite. <dt data-md><dfn class="css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-top">top<a class="self-link" href="#valdef-anchor-top"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-right">right<a class="self-link" href="#valdef-anchor-right"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-bottom">bottom<a class="self-link" href="#valdef-anchor-bottom"></a></dfn> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-left">left</dfn> <dd data-md> Refers to the specified side of the <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①⑤">anchor element</a>. Note: These are only usable in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties⑦">inset properties</a> in the matching axis. For example, <a class="css" data-link-type="maybe" href="#valdef-anchor-left" id="ref-for-valdef-anchor-left">left</a> is usable in <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a>, or the logical inset properties that refer to the horizontal axis. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-start">start</dfn> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-end">end</dfn> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-self-start">self-start</dfn> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-self-end">self-end</dfn> <dd data-md> Refers to one of the sides of the <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①⑥">anchor element</a> in the same axis as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties⑨">inset property</a> it’s used in, by resolving the keyword against the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing mode</a> of either the positioned element (for <a class="css" data-link-type="maybe" href="#valdef-anchor-self-start" id="ref-for-valdef-anchor-self-start">self-start</a> and <a class="css" data-link-type="maybe" href="#valdef-anchor-self-end" id="ref-for-valdef-anchor-self-end">self-end</a>) or the positioned element’s containing block (for <a class="css" data-link-type="maybe" href="#valdef-anchor-start" id="ref-for-valdef-anchor-start">start</a> and <a class="css" data-link-type="maybe" href="#valdef-anchor-end" id="ref-for-valdef-anchor-end">end</a>). <dt data-md><dfn class="css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-percentage"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①"><percentage></a><a class="self-link" href="#valdef-anchor-percentage"></a></dfn> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="anchor()" data-dfn-type="value" data-export id="valdef-anchor-center">center</dfn> <dd data-md> Refers to a position a corresponding percentage between the <a class="css" data-link-type="maybe" href="#valdef-anchor-start" id="ref-for-valdef-anchor-start①">start</a> and <a class="css" data-link-type="maybe" href="#valdef-anchor-end" id="ref-for-valdef-anchor-end①">end</a> sides, with 0% being equivalent to start and 100% being equivalent to end. <a class="css" data-link-type="maybe" href="#valdef-anchor-center" id="ref-for-valdef-anchor-center">center</a> is equivalent to 50%. </dl> <li data-md> the optional <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①"><length-percentage></a> final argument is a fallback value, specifying what the function should resolve to if it’s an <a data-link-type="dfn" href="#valid-anchor-function" id="ref-for-valid-anchor-function">invalid anchor function</a>. </ul> <a class="self-link" href="#issue-02b9489e"></a> Computed value for anchor() probably needs to be the anchor() function, but with the target anchor element resolved. This allows for transitions to work properly with tree-scoped names, and with changing anchor elements. See <a href="https://github.com/w3c/csswg-drafts/issues/8180">Issue 8180</a>. An <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor⑦">anchor()</a> function representing a <a data-link-type="dfn" href="#valid-anchor-function" id="ref-for-valid-anchor-function①">valid anchor function</a> resolves at <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value">used value</a> time to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value①" title="Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | q | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw"><length></a> that would align the edge of the positioned elements' <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block">inset-modified containing block</a> corresponding to the property the function appears in with the specified border edge of the <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element⑦">target anchor element</a>, assuming that all <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll containers</a> between the target anchor element and the positioned element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①③">containing block</a> are scrolled to their initial scroll position (but see <a href="#scroll">§ 3.4 Taking Scroll Into Account</a>). If the <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element⑨">target anchor element</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragment" id="ref-for-fragment">fragmented</a>, the axis-aligned bounding rectangle of the fragments' border boxes is used instead. <a class="self-link" href="#issue-3c6fe13f"></a> Do we need to control which box we’re referring to, so you can align to padding or content edge? The positioned element is additionally visually shifted by its <a data-link-type="dfn" href="#snapshotted-scroll-offset" id="ref-for-snapshotted-scroll-offset">snapshotted scroll offset</a>, as if by an additional <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-translate" id="ref-for-funcdef-transform-translate">translate()</a> transform. <div class="example" id="example-ef794aa0"> <a class="self-link" href="#example-ef794aa0"></a> For example, in .bar { top: anchor(--foo top); }, the <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor⑧">anchor()</a> will resolve to the length that’ll line up the <code>.bar</code> element’s top edge with the --foo anchor’s top edge. On the other hand, in .bar { bottom: anchor(--foo top); }, it will instead resolve to the length that’ll line up the <code>.bar</code> element’s bottom edge with the --foo anchor’s top edge. Since <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top">top</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom">bottom</a> values specify insets from different edges (the top and bottom of the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①④">containing block</a>, respectively), the same <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor⑨">anchor()</a> will usually resolve to different lengths in each. </div> <div class="example" id="example-a7ac0832"> <a class="self-link" href="#example-a7ac0832"></a> Because the <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor①⓪">anchor()</a> function resolves to a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value②" title="Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | q | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw"><length></a>, it can be used in <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#math-function" id="ref-for-math-function">math functions</a> like any other length. For example, the following will set up the element so that its <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block①">inset-modified containing block</a> is centered on the <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①⑦">anchor element</a> and as wide as possible without overflowing the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①⑤">containing block</a>: <pre class="highlight">.centered-message <c- p>{</c-> <c- k>position</c-><c- p>:</c-> fixed<c- p>;</c-> <c- k>max-width</c-><c- p>:</c-> max-content<c- p>;</c-> <c- k>justify-self</c-><c- p>:</c-> center<c- p>;</c-> <c- k>--center</c-><c- p>:</c-> <c- nf>anchor</c-><c- p>(</c->--x <c- m>50</c-><c- k>%</c-><c- p>);</c-> <c- k>--half-distance</c-><c- p>:</c-> <c- nf>min</c-><c- p>(</c-> <c- nf>abs</c-><c- p>(</c-><c- m>0</c-><c- k>%</c-> - <c- nf>var</c-><c- p>(</c->--center<c- p>)),</c-> <c- nf>abs</c-><c- p>(</c-><c- m>100</c-><c- k>%</c-> - <c- nf>var</c-><c- p>(</c->--center<c- p>))</c-> <c- p>);</c-> <c- k>left</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- nf>var</c-><c- p>(</c->--center<c- p>)</c-> - <c- nf>var</c-><c- p>(</c->--half-distance<c- p>));</c-> <c- k>right</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- nf>var</c-><c- p>(</c->--center<c- p>)</c-> - <c- nf>var</c-><c- p>(</c->--half-distance<c- p>));</c-> <c- k>bottom</c-><c- p>:</c-> <c- nf>anchor</c-><c- p>(</c->--x top<c- p>);</c-> <c- p>}</c-> </pre> This might be appropriate for an error message on an <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/input.html#the-input-element" id="ref-for-the-input-element">input</a></code> element, for example, as the centering will make it easier to discover which input is being referred to. </div> <h3 class="heading settled" data-level="3.3" id="anchor-center">3.3. Centering on the Anchor: the <a class="css" data-link-type="maybe" href="#valdef-justify-self-anchor-center" id="ref-for-valdef-justify-self-anchor-center②">anchor-center</a> value<a class="self-link" href="#anchor-center"></a></h3> <table class="def propdef partial" data-link-for-hint="justify-self"> <tbody> <tr> <th>Name: <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" id="ref-for-propdef-justify-self①">justify-self</a>, <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" id="ref-for-propdef-align-self①">align-self</a>, <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" id="ref-for-propdef-justify-items">justify-items</a>, <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" id="ref-for-propdef-align-items">align-items</a> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a> <td class="prod">anchor-center </table> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#self-alignment-properties" id="ref-for-self-alignment-properties②">self-alignment properties</a> allow an <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position⑨">absolutely-positioned</a> element to align itself within the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block②">inset-modified containing block</a>. The existing values, plus carefully chosen <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties①⓪">inset properties</a>, are usually enough for useful alignment, but a common case for anchored positioning—centering over the anchor element—requires careful and somewhat complex set-up to achieve. The new <dfn class="dfn-paneled css" data-dfn-for="justify-self, align-self, justify-items, align-items" data-dfn-type="value" data-export id="valdef-justify-self-anchor-center">anchor-center</dfn> value makes this case extremely simple: if the positioned element has a <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element⑨">default anchor element</a>, then it is aligned so as to center itself over the default anchor element in the relevant axis. Additionally, any <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①">auto</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties①①">inset properties</a> resolve to 0. However, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available">available space</a> for the positioned element in the relevant axis is reduced to the size of the largest rectangle that is centered on the <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element①①">default anchor element</a> and doesn’t overflow the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block③">inset-modified containing block</a>. (Possibly being zero-sized, if the anchor’s center is not within the inset-modified containing block.) If the element is not <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①⓪">absolutely positioned</a>, or does not have a <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element①②">default anchor element</a>, this value behaves as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center" id="ref-for-valdef-self-position-center">center</a> and has no additional effect on how <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties①②">inset properties</a> resolve. <h3 class="heading settled" data-level="3.4" id="scroll">3.4. Taking Scroll Into Account<a class="self-link" href="#scroll"></a></h3> Because scrolling is often done in a separate thread from layout in implementations for performance reasons, but <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor①①">anchor()</a> can result in both positioning changes (which can be handled in the scrolling thread) and layout changes (which cannot), anchor() is defined to assume all the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①">scroll containers</a> between the anchor element and the positioned element’s containing block are at their initial scroll position. This means a positioned element will not be aligned with its anchor if any of the scrollers are not at their initial positions. To compensate for this without losing the performance benefits of the separate scrolling thread, we define: <div class="algorithm" data-algorithm="compensate for scroll"> An <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①①">absolutely-positioned</a> element <var>query el</var> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="needs-scroll-adjustment">needs scroll adjustment</dfn> in the horizontal or vertical axis if both of the following conditions are true: <ul> <li data-md> <var>query el</var> has a <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element①③">default anchor element</a>. <li data-md> At least one <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor①③">anchor()</a> function on <var>query el</var>’s used <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties①③">inset properties</a> in the axis refers to a <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element①⓪">target anchor element</a> with the same nearest <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container②">scroll container</a> ancestor as <var>query el</var>’s <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element①④">default anchor element</a>, or <var>query el</var>’s used <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#self-alignment-properties" id="ref-for-self-alignment-properties③">self-alignment property</a> value in the axis is <a class="css" data-link-type="maybe" href="#valdef-justify-self-anchor-center" id="ref-for-valdef-justify-self-anchor-center③">anchor-center</a>. </ul> Note: If <var>query el</var> has a <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list①">position options list</a>, then whether it <a data-link-type="dfn" href="#needs-scroll-adjustment" id="ref-for-needs-scroll-adjustment">needs scroll adjustment</a> in an axis is also affected by the applied fallback style. <var>query el</var>’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="snapshotted-scroll-offset">snapshotted scroll offset</dfn> is a pair of lengths for the horizontal and vertical axises, respectively. Each length is calculated as: <ul> <li data-md> If <var>query el</var> <a data-link-type="dfn" href="#needs-scroll-adjustment" id="ref-for-needs-scroll-adjustment①">needs scroll adjustment</a> in the axis, then the length is the sum of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-offset" id="ref-for-scroll-offset">scroll offsets</a> of all <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container③">scroll container</a> ancestors of the <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element①⑤">default anchor element</a> in the same axis, up to but not including <var>query el</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①⑥">containing block</a>; <li data-md> Otherwise, the length is 0. </ul> <a class="self-link" href="#issue-5446f06a"></a> Define the precise timing of the snapshot: updated each frame, before style recalc. </div> <h3 class="heading settled" data-level="3.5" id="anchor-valid">3.5. Validity<a class="self-link" href="#anchor-valid"></a></h3> An <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor①④">anchor()</a> function is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="valid anchor function|invalid anchor function" data-noexport id="valid-anchor-function">valid anchor function</dfn> only if all the following conditions are true: <ul> <li data-md> It’s being used in an <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties①④">inset property</a> on an <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①②">absolutely-positioned</a> element. <li data-md> If its <a class="production css" data-link-type="type" href="#typedef-anchor-side" id="ref-for-typedef-anchor-side③"><anchor-side></a> specifies a physical keyword, it’s being used in an <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties①⑤">inset property</a> in that axis. (For example, <a class="css" data-link-type="maybe" href="#valdef-anchor-left" id="ref-for-valdef-anchor-left①">left</a> can only be used in <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left①">left</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right①">right</a>, or a logical inset property in the horizontal axis.) <li data-md> The result of determining the <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element①①">target anchor element</a> is not nothing when given the querying element as the element it’s used on, and the anchor specifier as the <a class="production css" data-link-type="type" href="#typedef-anchor-element" id="ref-for-typedef-anchor-element⑤"><anchor-element></a> value specified in the function. </ul> If any of these conditions are false, the <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor①⑤">anchor()</a> function resolves to its specified fallback value. If no fallback value is specified, it resolves to 0px. <h3 class="heading settled" data-level="3.6" id="position-visibility">3.6. Conditional Hiding: the <a class="property css" data-link-type="property" href="#propdef-position-visibility" id="ref-for-propdef-position-visibility">position-visibility</a> property<a class="self-link" href="#position-visibility"></a></h3> <table class="def propdef" data-link-for-hint="position-visibility"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-position-visibility">position-visibility</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">always <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦④">|</a> [ anchors-valid <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any③">||</a> anchors-visible || no-overflow ] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>anchors-visible <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①③">absolutely-positioned</a> elements <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> There are times when an element’s anchors are not appropriate for positioning the element with, and it would be better to simply not display the element at all. <a class="property css" data-link-type="property" href="#propdef-position-visibility" id="ref-for-propdef-position-visibility①">position-visibility</a> provides several conditions where this could be the case. <dl> <dt data-md><dfn class="css" data-dfn-for="position-visibility" data-dfn-type="value" data-export id="valdef-position-visibility-always">always<a class="self-link" href="#valdef-position-visibility-always"></a></dfn> <dd data-md> This property has no effect. (The element is displayed without regard for its anchors or its overflowing status.) <dt data-md><dfn class="css" data-dfn-for="position-visibility" data-dfn-type="value" data-export id="valdef-position-visibility-anchors-valid">anchors-valid<a class="self-link" href="#valdef-position-visibility-anchors-valid"></a></dfn> <dd data-md> If any of the element’s <a data-link-type="dfn" href="#required-anchor-reference" id="ref-for-required-anchor-reference">required anchor references</a> do not resolve to a <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element①②">target anchor element</a>, the element is <a data-link-type="dfn" href="#strongly-hidden" id="ref-for-strongly-hidden">strongly hidden</a>. <a class="self-link" href="#issue-1cb463e7"></a> Does misused anchor() count, like <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">border-width: anchor(--foo)</a>? I assume no, so we’ll need to split out the concept of invalid usage from a valid usage that fails to find an anchor. <a class="self-link" href="#issue-152d003b"></a> What is a <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-noexport id="required-anchor-reference">required anchor reference</dfn>? <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor①⑥">anchor()</a> functions that don’t have a fallback value; the default anchor *sometimes*? Need more detail here. <a class="self-link" href="#issue-b50451b1"></a> Any anchors are missing, or all anchors are missing? I can see use-cases for either, potentially. Do we want to make a decision here, or make it controllable somehow? <dt data-md><dfn class="css" data-dfn-for="position-visibility" data-dfn-type="value" data-export id="valdef-position-visibility-anchors-visible">anchors-visible<a class="self-link" href="#valdef-position-visibility-anchors-visible"></a></dfn> <dd data-md> If the element has a <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element①⑥">default anchor element</a> but the anchor element is <a data-link-type="dfn" href="#clipped-by-intervening-elements" id="ref-for-clipped-by-intervening-elements">clipped by intervening elements</a>, this element is also <a data-link-type="dfn" href="#strongly-hidden" id="ref-for-strongly-hidden①">strongly hidden</a>. <a class="self-link" href="#issue-2f25882e"></a> Since only the <a data-link-type="dfn" href="#default-anchor-element" id="ref-for-default-anchor-element①⑦">default anchor element</a> triggers scroll-compensation, it’s really the only one that makes sense to condition this on. Right? <dt data-md><dfn class="css" data-dfn-for="position-visibility" data-dfn-type="value" data-export id="valdef-position-visibility-no-overflow">no-overflow<a class="self-link" href="#valdef-position-visibility-no-overflow"></a></dfn> <dd data-md> If the element overflows its <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block⑤">inset-modified containing block</a>, even after applying <a class="property css" data-link-type="property" href="#propdef-position-try" id="ref-for-propdef-position-try">position-try</a>, then the element is <a data-link-type="dfn" href="#strongly-hidden" id="ref-for-strongly-hidden②">strongly hidden</a>. </dl> <div class="algorithm" data-algorithm="clipped by intervening elements"> An anchor element <var>anchor</var> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="clipped-by-intervening-elements">clipped by intervening elements</dfn> relative to a positioned element <var>abspos</var> relying on it if <var>anchor</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow-rectangle" id="ref-for-ink-overflow-rectangle">ink overflow rectangle</a> is fully clipped by an element which is an ancestor of <var>anchor</var> but a descendant of <var>abspos</var>’s containing block. This "clipping" can be due to the ancestor being a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container④">scroll container</a>, or being clipped to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-4/#overflow-clip-edge" id="ref-for-overflow-clip-edge">overflow clip edge</a> (such as by <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow: clip</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#paint-containment" id="ref-for-paint-containment">paint containment</a>). <a class="self-link" href="#issue-efe69095"></a> Should any other clipping matter? The <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip" id="ref-for-propdef-clip">clip</a>/<a class="property css" data-link-type="property" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip-path" id="ref-for-propdef-clip-path">clip-path</a>/<a class="property css" data-link-type="property" href="https://drafts.fxtf.org/css-masking-1/#propdef-mask" id="ref-for-propdef-mask">mask</a> properties? <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity: 0</a>? Note: This means that if an abspos is next to its anchor in the DOM, for example, it’ll remain visible even if its default anchor is scrolled off, since it’s clipped by the same scroller anyway. <a class="self-link" href="#issue-ceb6dcc9"></a> Make sure this definition of clipped is consistent with View Transitions, which wants a similar concept. <var>anchor</var> is also considered <a data-link-type="dfn" href="#clipped-by-intervening-elements" id="ref-for-clipped-by-intervening-elements①">clipped by intervening elements</a> if it is <a data-link-type="dfn" href="#strongly-hidden" id="ref-for-strongly-hidden③">strongly hidden</a> by <a class="property css" data-link-type="property" href="#propdef-position-visibility" id="ref-for-propdef-position-visibility②">position-visibility</a>. Note: This ensures that in a "chained anchor" situation, if the first abspos is hidden due to this property (due to its anchor being scrolled off), then another abspos using it as an anchor will also be hidden, rather than also floating in a nonsensical location. <a class="self-link" href="#issue-8f86aaba"></a> I think we don’t want to make this dependent on any other types of invisibility. Anchoring an <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity①">opacity: 0</a> element might make sense, for example. This property’s hiding is based on dynamic state, which you can’t otherwise select on; all of those other sources are caused by other styling, which you can just condition this element on as well if you want to hide it at the same time. </div> Making an element <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="strongly-hidden">strongly hidden</dfn> makes it act as if it and all of its descendants were <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-visibility" id="ref-for-propdef-visibility">visibility: hidden</a>, regardless of what their actual visibility value is. <h2 class="heading settled" data-level="4" id="sizing">4. Anchor-Based Sizing<a class="self-link" href="#sizing"></a></h2> An <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①④">absolutely-positioned</a> element can use the <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-anchor-size">anchor-size()</dfn> function in its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#sizing-property" id="ref-for-sizing-property">sizing properties</a> to refer to the size of one or more <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①⑧">anchor elements</a>. The <a class="css" data-link-type="maybe" href="#funcdef-anchor-size" id="ref-for-funcdef-anchor-size②">anchor-size()</a> function resolves to a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value③" title="Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | q | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw"><length></a>. <h3 class="heading settled" data-level="4.1" id="anchor-size-fn">4.1. The <a class="css" data-link-type="maybe" href="#funcdef-anchor-size" id="ref-for-funcdef-anchor-size③">anchor-size()</a> Function<a class="self-link" href="#anchor-size-fn"></a></h3> <pre class="prod">anchor-size() = anchor-size( <a class="production" data-link-type="type" href="#typedef-anchor-element" id="ref-for-typedef-anchor-element⑥"><anchor-element></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> <a class="production" data-link-type="type" href="#typedef-anchor-size" id="ref-for-typedef-anchor-size"><anchor-size></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma①">,</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②"><length-percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> ) <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-anchor-size"><a class="production" data-link-type="type" href="#typedef-anchor-size" id="ref-for-typedef-anchor-size①"><anchor-size></a></dfn> = width <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⑤">|</a> height <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⑥">|</a> block <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⑦">|</a> inline <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⑧">|</a> self-block <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⑨">|</a> self-inline </pre> The <a class="css" data-link-type="maybe" href="#funcdef-anchor-size" id="ref-for-funcdef-anchor-size④">anchor-size()</a> function is similar to <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor①⑦">anchor()</a>, and takes the same arguments, save that the <a class="production css" data-link-type="type" href="#typedef-anchor-side" id="ref-for-typedef-anchor-side④"><anchor-side></a> keywords are replaced with <a class="production css" data-link-type="type" href="#typedef-anchor-size" id="ref-for-typedef-anchor-size②"><anchor-size></a>, referring to the distance between two opposing sides. The physical <a class="production css" data-link-type="type" href="#typedef-anchor-size" id="ref-for-typedef-anchor-size③"><anchor-size></a> keywords (<dfn class="css" data-dfn-for="anchor-size()" data-dfn-type="value" data-export id="valdef-anchor-size-width">width<a class="self-link" href="#valdef-anchor-size-width"></a></dfn> and <dfn class="css" data-dfn-for="anchor-size()" data-dfn-type="value" data-export id="valdef-anchor-size-height">height<a class="self-link" href="#valdef-anchor-size-height"></a></dfn>) refer to the width and height, respectively, of the <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element①③">target anchor element</a>. Unlike <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor①⑧">anchor()</a>, there is no restriction on having to match axises; for example, <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width">width: anchor-size(--foo height);</a> is valid. The logical <a class="production css" data-link-type="type" href="#typedef-anchor-size" id="ref-for-typedef-anchor-size④"><anchor-size></a> keywords (<dfn class="dfn-paneled css" data-dfn-for="anchor-size()" data-dfn-type="value" data-export id="valdef-anchor-size-block">block</dfn>, <dfn class="dfn-paneled css" data-dfn-for="anchor-size()" data-dfn-type="value" data-export id="valdef-anchor-size-inline">inline</dfn>, <dfn class="dfn-paneled css" data-dfn-for="anchor-size()" data-dfn-type="value" data-export id="valdef-anchor-size-self-block">self-block</dfn>, and <dfn class="dfn-paneled css" data-dfn-for="anchor-size()" data-dfn-type="value" data-export id="valdef-anchor-size-self-inline">self-inline</dfn>) map to one of the physical keywords according to either the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①">writing mode</a> of the element (for <a class="css" data-link-type="maybe" href="#valdef-anchor-size-self-block" id="ref-for-valdef-anchor-size-self-block">self-block</a> and <a class="css" data-link-type="maybe" href="#valdef-anchor-size-self-inline" id="ref-for-valdef-anchor-size-self-inline">self-inline</a>) or the writing mode of the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①⑦">containing block</a> (for <a class="css" data-link-type="maybe" href="#valdef-anchor-size-block" id="ref-for-valdef-anchor-size-block">block</a> and <a class="css" data-link-type="maybe" href="#valdef-anchor-size-inline" id="ref-for-valdef-anchor-size-inline">inline</a>). An <a class="css" data-link-type="maybe" href="#funcdef-anchor-size" id="ref-for-funcdef-anchor-size⑤">anchor-size()</a> function representing a <a data-link-type="dfn" href="#valid-anchor-size-function" id="ref-for-valid-anchor-size-function">valid anchor-size function</a> resolves to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value④" title="Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | q | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw"><length></a> separating the relevant border edges (either left and right, or top and bottom, whichever is in the specified axis) of the <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element①④">target anchor element</a>. <h3 class="heading settled" data-level="4.2" id="anchor-size-valid">4.2. Validity<a class="self-link" href="#anchor-size-valid"></a></h3> An <a class="css" data-link-type="maybe" href="#funcdef-anchor-size" id="ref-for-funcdef-anchor-size⑥">anchor-size()</a> function is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="valid anchor-size function|invalid anchor-size function" data-noexport id="valid-anchor-size-function">valid anchor-size function</dfn> only if all the following conditions are true: <ul> <li data-md> It’s being used in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#sizing-property" id="ref-for-sizing-property①">sizing property</a> on an <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①⑤">absolutely-positioned</a> element. <li data-md> There is a <a data-link-type="dfn" href="#target-anchor-element" id="ref-for-target-anchor-element①⑤">target anchor element</a> for the element it’s used on, and the <a class="production css" data-link-type="type" href="#typedef-anchor-element" id="ref-for-typedef-anchor-element⑦"><anchor-element></a> value specified in the function. </ul> If any of these conditions are false, the <a class="css" data-link-type="maybe" href="#funcdef-anchor-size" id="ref-for-funcdef-anchor-size⑦">anchor-size()</a> function resolves to its specified fallback value. If no fallback value is specified, it resolves to 0px. <h2 class="heading settled" data-level="5" id="fallback">5. Overflow Management<a class="self-link" href="#fallback"></a></h2> Anchor positioning, while powerful, can also be unpredictable. The <a data-link-type="dfn" href="#anchor-element" id="ref-for-anchor-element①⑨">anchor element</a> might be anywhere on the page, so positioning an element in any particular fashion (such as above the anchor, or the right of the anchor) might result in the positioned element overflowing its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①⑧">containing block</a> or being positioned partially off screen. To ameliorate this, an <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①⑥">absolutely positioned</a> element can use the <a class="property css" data-link-type="property" href="#propdef-position-try-options" id="ref-for-propdef-position-try-options">position-try-options</a> property to refer to several variant sets of positioning/alignment properties (generated from the element’s existing styles, or specified in <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try">@position-try</a> rules) that the UA can try if the element overflows its initial position. Each is applied to the element, one by one, and the first that doesn’t cause the element to overflow its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①⑨">containing block</a> is taken as the winner. <a class="property css" data-link-type="property" href="#propdef-position-try-order" id="ref-for-propdef-position-try-order">position-try-order</a> allows these options to additional be sorted by the available space they define, if it’s more important for the element to have as much space as possible rather than strictly follow some declared order. <h3 class="heading settled" data-level="5.1" id="position-try-options">5.1. Giving Fallback Options: the <a class="property css" data-link-type="property" href="#propdef-position-try-options" id="ref-for-propdef-position-try-options①">position-try-options</a> property<a class="self-link" href="#position-try-options"></a></h3> <table class="def propdef" data-link-for-hint="position-try-options"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-position-try-options">position-try-options</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧⓪">|</a> [ [<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident⑧"><dashed-ident></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any⑤">||</a> <a class="production css" data-link-type="type" href="#typedef-position-try-options-try-tactic" id="ref-for-typedef-position-try-options-try-tactic"><try-tactic></a>] | inset-area( <a class="production css" data-link-type="property" href="#propdef-inset-area" id="ref-for-propdef-inset-area④"><'inset-area'></a> ) ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma②">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①⑦">absolutely-positioned</a> elements <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> This property provides a list of alternate positioning styles to try when the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①⑧">absolutely positioned box</a> overflows its <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block⑥">inset-modified containing block</a>. This <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="position-options-list">position options list</dfn> is initially empty. Each comma-separated entry in the list is a separate option: either the name of a <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try①">@position-try</a> block, or a <a class="production css" data-link-type="type" href="#typedef-position-try-options-try-tactic" id="ref-for-typedef-position-try-options-try-tactic①"><try-tactic></a> representing an automatic transformation of the element’s existing computed style. Values have the following meanings: <dl> <dt data-md><dfn class="css" data-dfn-for="position-try-options" data-dfn-type="value" data-export id="valdef-position-try-options-none">none<a class="self-link" href="#valdef-position-try-options-none"></a></dfn> <dd data-md> The property has no effect; the element’s <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list②">position options list</a> is empty. <dt data-md><dfn class="css" data-dfn-for="position-try-options" data-dfn-type="value" data-export id="valdef-position-try-options-dashed-ident"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident⑨"><dashed-ident></a><a class="self-link" href="#valdef-position-try-options-dashed-ident"></a></dfn> <dd data-md> If there is a <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try②">@position-try</a> rule with the given name, its associated <a data-link-type="dfn" href="#position-option" id="ref-for-position-option">position option</a> is added to the <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list③">position options list</a>. Otherwise, this value has no effect. <dt data-md><dfn class="css" data-dfn-for="position-try-options" data-dfn-type="value" data-export id="valdef-position-try-options-try-tactic"><a class="production css" data-link-type="type" href="#typedef-position-try-options-try-tactic" id="ref-for-typedef-position-try-options-try-tactic②"><try-tactic></a><a class="self-link" href="#valdef-position-try-options-try-tactic"></a></dfn> <dd data-md> Automatically creates a <a data-link-type="dfn" href="#position-option" id="ref-for-position-option①">position option</a> from the element’s computed style, by swapping the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-properties" id="ref-for-margin-properties">margin</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#sizing-property" id="ref-for-sizing-property②">sizing</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties①⑦">inset</a>, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#self-alignment-properties" id="ref-for-self-alignment-properties④">self-alignment</a> property values among the element’s sides, and adds it to the <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list④">position options list</a>. <pre class="prod"><dfn class="dfn-paneled" data-dfn-for="position-try-options" data-dfn-type="type" data-export id="typedef-position-try-options-try-tactic"><a class="production" data-link-type="type" href="#typedef-position-try-options-try-tactic" id="ref-for-typedef-position-try-options-try-tactic③"><try-tactic></a></dfn> = flip-block <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any⑥">||</a> flip-inline <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any⑦">||</a> flip-start </pre> <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="position-try-options" data-dfn-type="value" data-export id="valdef-position-try-options-flip-block">flip-block</dfn> <dd data-md> swaps the values in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis">block axis</a> (between, for example, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-logical-1/#propdef-margin-block-start" id="ref-for-propdef-margin-block-start">margin-block-start</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-logical-1/#propdef-margin-block-end" id="ref-for-propdef-margin-block-end">margin-block-end</a>), essentially mirroring across an <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline-axis</a> line. <dt data-md><dfn class="css" data-dfn-for="position-try-options" data-dfn-type="value" data-export id="valdef-position-try-options-flip-inline">flip-inline<a class="self-link" href="#valdef-position-try-options-flip-inline"></a></dfn> <dd data-md> swaps the values in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①">inline axis</a>, essentially mirroring across a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①">block-axis</a> line. <dt data-md><dfn class="css" data-dfn-for="position-try-options" data-dfn-type="value" data-export id="valdef-position-try-options-flip-start">flip-start<a class="self-link" href="#valdef-position-try-options-flip-start"></a></dfn> <dd data-md> swaps the values of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-start" id="ref-for-css-start①">start</a> properties with each other, and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-end" id="ref-for-css-end①">end</a> properties with each other (between, for example, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-logical-1/#propdef-margin-block-start" id="ref-for-propdef-margin-block-start①">margin-block-start</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-logical-1/#propdef-margin-inline-start" id="ref-for-propdef-margin-inline-start">margin-inline-start</a>), essentially mirroring across a diagonal drawn from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start">start</a>-<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start">start</a> corner to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-end" id="ref-for-block-end">end</a>-<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-end" id="ref-for-inline-end">end</a> corner. </dl> If multiple keywords are given, the transformations are composed in order to produce a single <a data-link-type="dfn" href="#position-option" id="ref-for-position-option②">position option</a>. <a class="self-link" href="#issue-3980b8c2"></a> Define how the values themselves are changed upon flipping: anchor(top) becomes anchor(bottom); start becomes end; etc. <dt data-md><dfn class="css" data-dfn-for="position-try-options" data-dfn-type="value" data-export id="valdef-position-try-options-dashed-ident--try-tactic"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident①⓪"><dashed-ident></a> || <a class="production css" data-link-type="type" href="#typedef-position-try-options-try-tactic" id="ref-for-typedef-position-try-options-try-tactic④"><try-tactic></a><a class="self-link" href="#valdef-position-try-options-dashed-ident--try-tactic"></a></dfn> <dd data-md> Combines the effects of the previous two options: if there is a <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try③">@position-try</a> rule with the given name, then applies its <a data-link-type="dfn" href="#position-option" id="ref-for-position-option③">position option</a> to the element’s base style, transforms it according to the specified <a class="production css" data-link-type="type" href="#typedef-position-try-options-try-tactic" id="ref-for-typedef-position-try-options-try-tactic⑤"><try-tactic></a>, and then adds the result to the element’s <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list⑤">position options list</a>. Otherwise, does nothing. <dt data-md><dfn class="css" data-dfn-for="position-try-options" data-dfn-type="value" data-export id="valdef-position-try-options-inset-area-inset-area">inset-area( <a class="production css" data-link-type="property" href="#propdef-inset-area" id="ref-for-propdef-inset-area⑤"><'inset-area'></a> )<a class="self-link" href="#valdef-position-try-options-inset-area-inset-area"></a></dfn> <dd data-md> Automatically creates a <a data-link-type="dfn" href="#position-option" id="ref-for-position-option④">position option</a> composed solely of an <a class="property css" data-link-type="property" href="#propdef-inset-area" id="ref-for-propdef-inset-area⑥">inset-area</a> property with the given value. </dl> <h3 class="heading settled" data-level="5.2" id="position-try-order-property">5.2. Determining Fallback Order: the <a class="property css" data-link-type="property" href="#propdef-position-try-order" id="ref-for-propdef-position-try-order①">position-try-order</a> property<a class="self-link" href="#position-try-order-property"></a></h3> <table class="def propdef" data-link-for-hint="position-try-order"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-position-try-order">position-try-order</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧②">|</a> <a class="production css" data-link-type="type" href="#typedef-try-size" id="ref-for-typedef-try-size"><try-size></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>normal <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①⑨">absolutely positioned elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> This property specifies the order in which the <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list⑥">position options list</a> will be tried. <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-try-size"><a class="production" data-link-type="type" href="#typedef-try-size" id="ref-for-typedef-try-size①"><try-size></a></dfn> = most-width <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧③">|</a> most-height <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧④">|</a> most-block-size <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧⑤">|</a> most-inline-size </pre> <dl> <dt data-md><dfn class="css" data-dfn-for="position-try-order" data-dfn-type="value" data-export id="valdef-position-try-order-normal">normal<a class="self-link" href="#valdef-position-try-order-normal"></a></dfn> <dd data-md> Try the <a data-link-type="dfn" href="#position-option" id="ref-for-position-option⑤">position options</a> in the order specified by <a class="property css" data-link-type="property" href="#propdef-position-try-options" id="ref-for-propdef-position-try-options②">position-try-options</a>. <dt data-md><dfn class="css" data-dfn-for="position-try-order" data-dfn-type="value" data-export id="valdef-position-try-order-most-width">most-width<a class="self-link" href="#valdef-position-try-order-most-width"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="position-try-order" data-dfn-type="value" data-export id="valdef-position-try-order-most-height">most-height<a class="self-link" href="#valdef-position-try-order-most-height"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="position-try-order" data-dfn-type="value" data-export id="valdef-position-try-order-most-block-size">most-block-size<a class="self-link" href="#valdef-position-try-order-most-block-size"></a></dfn> <dt data-md><dfn class="css" data-dfn-for="position-try-order" data-dfn-type="value" data-export id="valdef-position-try-order-most-inline-size">most-inline-size<a class="self-link" href="#valdef-position-try-order-most-inline-size"></a></dfn> <dd data-md> For each entry in the <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list⑦">position options list</a>, <a data-link-type="dfn" href="#apply-a-position-option" id="ref-for-apply-a-position-option">apply a position option</a> using that option to the element, and find the specified <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block⑦">inset-modified containing block</a> size that results from those styles. Stably sort the position options list according to this size, with the largest coming first. </dl> <div class="example" id="example-a1ca8230"> <a class="self-link" href="#example-a1ca8230"></a> For example, the following styles will initially position the popup list below its anchoring button, but if that overflows, will decide whether to keep the popup list below the anchor or move it above, depending on which option gives it the most space. <pre class="highlight">.anchor <c- p>{</c-> <c- k>anchor-name</c-><c- p>:</c-> --foo<c- p>;</c-> <c- p>}</c-> .list <c- p>{</c-> <c- k>position</c-><c- p>:</c-> fixed<c- p>;</c-> <c- k>position-anchor</c-><c- p>:</c-> --foo<c- p>;</c-> <c- k>top</c-><c- p>:</c-> <c- nf>anchor</c-><c- p>(</c->bottom<c- p>);</c-> <c- k>left</c-><c- p>:</c-> <c- nf>anchor</c-><c- p>(</c->left<c- p>);</c-> <c- k>align-self</c-><c- p>:</c-> start<c- p>;</c-> <c- k>position-try-options</c-><c- p>:</c-> --bottom-scrollable<c- p>,</c-> flip-block<c- p>,</c-> --top-scrollable<c- p>;</c-> <c- k>position-try-order</c-><c- p>:</c-> most-height<c- p>;</c-> <c- p>}</c-> <c- n>@position-try</c-> --bottom-scrollable <c- p>{</c-> <c- k>align-self</c-><c- p>:</c-> stretch<c- p>;</c-> <c- p>}</c-> <c- n>@position-try</c-> --top-scrollable <c- p>{</c-> <c- k>top</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- k>bottom</c-><c- p>:</c-> <c- nf>anchor</c-><c- p>(</c->top<c- p>);</c-> <c- k>align-self</c-><c- p>:</c-> stretch<c- p>;</c-> <c- p>}</c-> </pre> The <a class="css" data-link-type="maybe" href="#valdef-position-try-options-flip-block" id="ref-for-valdef-position-try-options-flip-block">flip-block</a> auto-generated option and the --top-scrollable option will always find the same available height, since both of them stretch vertically from <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top①">top: 0</a> (the top edge of the viewport) to <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom①">bottom: anchor(top)</a> (the top of the anchor), so they’ll retain their specified order. This causes the element to first try to align against the anchor at its natural height (using <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" id="ref-for-propdef-align-self②">align-self: end</a>, auto-reversed from the base styles), but if that also causes overflow, it’ll fall back to just filling the space and being scrollable instead. </div> <h3 class="heading settled" data-level="5.3" id="position-try-prop">5.3. The <a class="property css" data-link-type="property" href="#propdef-position-try" id="ref-for-propdef-position-try①">position-try</a> Shorthand<a class="self-link" href="#position-try-prop"></a></h3> <table class="def propdef" data-link-for-hint="position-try"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-position-try">position-try</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="#propdef-position-try-order" id="ref-for-propdef-position-try-order②"><'position-try-order'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> <a class="production css" data-link-type="property" href="#propdef-position-try-options" id="ref-for-propdef-position-try-options③"><'position-try-options'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> This shorthand sets both <a class="property css" data-link-type="property" href="#propdef-position-try-options" id="ref-for-propdef-position-try-options④">position-try-options</a> and <a class="property css" data-link-type="property" href="#propdef-position-try-order" id="ref-for-propdef-position-try-order③">position-try-order</a>. If <'position-try-order'> is omitted, it’s set to the property’s initial value. <h3 class="heading settled" data-level="5.4" id="fallback-rule">5.4. The <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try④">@position-try</a> Rule<a class="self-link" href="#fallback-rule"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="at-rule" data-export id="at-ruledef-position-try">@position-try</dfn> rule defines a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="position-option">position option</dfn> with a given name, specifying one or more sets of positioning properties that will be applied to an element via <a class="property css" data-link-type="property" href="#propdef-position-try-options" id="ref-for-propdef-position-try-options⑤">position-try-options</a>, The syntax of the <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try⑤">@position-try</a> rule is: <pre class="prod">@position-try <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident①①"><dashed-ident></a> { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list"><declaration-list></a> } </pre> The <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident①②"><dashed-ident></a> specified in the prelude is the rule’s name. If multiple <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try⑥">@position-try</a> rules are declared with the same name, the last one in document order "wins". The <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try⑦">@position-try</a> rule only <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="accepted @position-try properties" id="accepted-position-try-properties">accepts</dfn> the following <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#css-property" id="ref-for-css-property">properties</a>: <ul> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties①⑧">inset properties</a> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-properties" id="ref-for-margin-properties①">margin properties</a> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#sizing-property" id="ref-for-sizing-property③">sizing properties</a> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#self-alignment-properties" id="ref-for-self-alignment-properties⑤">self-alignment properties</a> <li data-md> <a class="property css" data-link-type="property" href="#propdef-position-anchor" id="ref-for-propdef-position-anchor②">position-anchor</a> <li data-md> <a class="property css" data-link-type="property" href="#propdef-inset-area" id="ref-for-propdef-inset-area⑦">inset-area</a> </ul> It is invalid to use !important on the properties in the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①"><declaration-list></a>. Doing so causes the property it is used on to become invalid, but does not invalid the @property-try rule as a whole. All of the properties in a <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try⑧">@position-try</a> are applied to the element as part of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="position-fallback-origin">Position Fallback Origin</dfn>, a new <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-6/#origin" id="ref-for-origin">cascade origin</a> that lies between the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-author" id="ref-for-cascade-origin-author">Author Origin</a> and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-animation" id="ref-for-cascade-origin-animation">Animation Origin</a>. Similar to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-animation" id="ref-for-cascade-origin-animation①">Animation Origin</a>, use of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-revert" id="ref-for-valdef-all-revert">revert</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer">revert-layer</a> values (or anything else that would rollback the property to the preceding origin) acts as if the property was part of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-author" id="ref-for-cascade-origin-author①">Author Origin</a>. (Thus, it instead reverts back to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-user" id="ref-for-cascade-origin-user">User Origin</a>.) <a class="self-link" href="#issue-14452576"></a> What exactly are the constraints that determine what’s allowed here? Current list is based off of what’s reasonable from Chrome’s experimental impl. We can make a CQ that keys off of which fallback was used to allow more general styling, at least for descendants. <a class="self-link" href="#issue-5b530169"></a> Would be useful to be able to detect when your anchor(s) are fully off-screen and suppress your display entirely. For example, tooltips living outside the scroller holding the text they’re anchored to don’t want to just hover over arbitrary parts of the page because their anchor happens to have that position relative to the scrollport. Note: If multiple elements using different anchors want to use the same fallback positioning, just relative to their own anchor elements, omit the <a class="production css" data-link-type="type" href="#typedef-anchor-element" id="ref-for-typedef-anchor-element⑧"><anchor-element></a> in <a class="css" data-link-type="maybe" href="#funcdef-anchor" id="ref-for-funcdef-anchor①⑨">anchor()</a> and specify each element’s anchor in <a class="property css" data-link-type="property" href="#propdef-position-anchor" id="ref-for-propdef-position-anchor③">position-anchor</a> instead. Note: The most common types of fallback positioning (putting the positioned element on one side of the anchor normally, but flipping to the opposite side if needed) can be done automatically with keywords in <a class="property css" data-link-type="property" href="#propdef-position-try-options" id="ref-for-propdef-position-try-options⑥">position-try-options</a>, without using <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try⑨">@position-try</a> at all. <h3 class="heading settled" data-level="5.5" id="fallback-apply">5.5. Applying Position Fallback<a class="self-link" href="#fallback-apply"></a></h3> When a positioned element overflows its <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block⑧">inset-modified containing block</a>, and has a non-empty <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list⑨">position options list</a>, it <a data-link-type="dfn" href="#determine-the-position-fallback-styles" id="ref-for-determine-the-position-fallback-styles">determines the position fallback styles</a> for the element to attempt to find an option that avoids overflow. These modified styles are applied to the element via <a data-link-type="dfn" href="#style--layout-interleave" id="ref-for-style--layout-interleave">interleaving</a>, so they affect <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value">computed values</a> (and can trigger transitions/etc) even tho they depend on layout and <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value①">used values</a>. They are applied as part of the <a data-link-type="dfn" href="#position-fallback-origin" id="ref-for-position-fallback-origin">position fallback origin</a>. <div class="algorithm" data-algorithm="apply a position option"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="apply-a-position-option">apply a position option</dfn> to an element <var>el</var>, given a <a data-link-type="dfn" href="#position-option" id="ref-for-position-option⑥">position option</a> <var>new styles</var>: <ol> <li data-md> With <var>new styles</var> inserted into the cascade in the <a data-link-type="dfn" href="#position-fallback-origin" id="ref-for-position-fallback-origin①">position fallback origin</a>, resolve the cascade, and perform enough layout to determine <var>el</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value②">used styles</a>. <li data-md> Return <var>el</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value③">used styles</a>. </ol> </div> <div class="algorithm" data-algorithm="determine the position fallback styles"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="determine-the-position-fallback-styles">determine the position fallback styles</dfn> of an element <var>el</var>: <ol> <li data-md> Let <var>base styles</var> be the current used styles of <var>el</var>. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate">For each</a> <var>option</var> in the <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list①⓪">position options list</a>: <ol> <li data-md> Let <var>adjusted styles</var> be the result of <a data-link-type="dfn" href="#apply-a-position-option" id="ref-for-apply-a-position-option①">applying a position option</a> <var>option</var> to <var>el</var>. <li data-md> Let <var>el rect</var> be the size and position of <var>el</var>’s margin box, when laid out with <var>adjusted styles</var>. Let <var>cb rect</var> be the size and position of <var>el</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block⑨">inset-modified containing block</a>. <li data-md> If <var>el</var> has a <a data-link-type="dfn" href="#snapshotted-scroll-offset" id="ref-for-snapshotted-scroll-offset①">snapshotted scroll offset</a>, subtract it from the position of both <var>el rect</var> and <var>cb rect</var>. <li data-md> If <var>el rect</var> is not fully contained within <var>cb rect</var>, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-continue" id="ref-for-iteration-continue">continue</a>. <li data-md> Set <var>option</var> as <var>el</var>’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="last-successful-position-option">last successful position option</dfn>. Return <var>adjusted styles</var>. </ol> <li data-md> Assert: The previous step finished without finding a <a data-link-type="dfn" href="#position-option" id="ref-for-position-option⑦">position option</a> that avoids overflow. <li data-md> If <var>el</var> has a <a data-link-type="dfn" href="#last-successful-position-option" id="ref-for-last-successful-position-option">last successful position option</a>, return the result of <a data-link-type="dfn" href="#apply-a-position-option" id="ref-for-apply-a-position-option②">applying a position option</a>, using that option, to <var>el</var>. <li data-md> Return <var>base styles</var>. </ol> Note: Descendants overflowing <var>el</var> don’t affect this calculation, only <var>el</var>’s own <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-box" id="ref-for-margin-box">margin box</a>. </div> During a full layout pass, once an element has determined its fallback styles (or determined it’s not using any), laying out later elements cannot change this decision. <div class="example" id="example-58b895a3"> <a class="self-link" href="#example-58b895a3"></a> For example, say you have two positioned elements, A and B, with A laid out before B. If B overflows and causes A’s containing block to gain scrollbars, this does not cause A to go back and re-determine its fallback styles in an attempt to avoid overflowing. (At best, this can result in exponential layout costs; at worst, it’s cyclic and will never settle.) Layout does not "go backward", in other words. </div> <div class="algorithm" data-algorithm="forget the last rememberd @position-try option"> At the time that <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/resize-observer-1/#resizeobserver" id="ref-for-resizeobserver">ResizeObserver</a></code> events are determined and delivered, if an element <var>el</var> has a <a data-link-type="dfn" href="#last-successful-position-option" id="ref-for-last-successful-position-option①">last successful position option</a> and if any of the following are true of it, remove its last successful position option: <ul> <li data-md> <var>el</var> is not an <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position②⓪">absolutely positioned</a> element <li data-md> <var>el</var>’s computed value for <a class="property css" data-link-type="property" href="#propdef-position-try-options" id="ref-for-propdef-position-try-options⑦">position-try-options</a> has changed <li data-md> Any of the <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try①⓪">@position-try</a> rules referenced by <var>el</var>’s <a class="property css" data-link-type="property" href="#propdef-position-try-options" id="ref-for-propdef-position-try-options⑧">position-try-options</a> have been added, removed, or mutated. </ul> Note: The timing of this removal is intentionally identical to the treatment of <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-4/#last-remembered" id="ref-for-last-remembered">last remembered sizes</a>. </div> <a class="self-link" href="#issue-21c2b50d"></a> Make sure the snapshotted scroll offset stuff is correct now, given interleaving. Implementations may choose to impose an implementation-defined limit on the length of <a data-link-type="dfn" href="#position-options-list" id="ref-for-position-options-list①①">position options lists</a>, to limit the amount of excess layout work that may be required. This limit must be at least five. <div class="example" id="example-e9cc9812"> <a class="self-link" href="#example-e9cc9812"></a> For example, the following CSS will first attempt to position a "popover" below the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#elements" id="ref-for-elements①">element</a>, but if it doesn’t fit on-screen will switch to being above; it defaults to left-aligning, but will switch to right-aligning if that doesn’t fit. <pre class="highlight">#myPopover <c- p>{</c-> <c- k>position</c-><c- p>:</c-> fixed<c- p>;</c-> <c- k>top</c-><c- p>:</c-> <c- nf>anchor</c-><c- p>(</c->--button bottom<c- p>);</c-> <c- k>left</c-><c- p>:</c-> <c- nf>anchor</c-><c- p>(</c->--button left<c- p>);</c-> <c- k>position-try-options</c-><c- p>:</c-> flip-inline<c- p>,</c-> flip-block<c- p>,</c-> flip-block flip-inline<c- p>;</c-> <c- c>/* The popover is at least as wide as the button */</c-> min-width: <c- nf>anchor-size</c-><c- p>(</c->--button width<c- p>);</c-> <c- c>/* The popover is at least as tall as 2 menu items */</c-> min-height: <c- m>6</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> </pre> </div> <h2 class="heading settled" data-level="6" id="interfaces">6. DOM Interfaces<a class="self-link" href="#interfaces"></a></h2> <h3 class="heading settled" data-level="6.1" id="om-position-try">6.1. The CSSPositionTryRule interface<a class="self-link" href="#om-position-try"></a></h3> The <code class="idl"><a data-link-type="idl" href="#csspositiontryrule" id="ref-for-csspositiontryrule">CSSPositionTryRule</a></code> interface represents the <a class="css" data-link-type="maybe" href="#at-ruledef-position-try" id="ref-for-at-ruledef-position-try①①">@position-try</a> rule: <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="csspositiontryrule"><code><c- g>CSSPositionTryRule</c-></code></dfn> : <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssrule" id="ref-for-cssrule"><c- n>CSSRule</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-csspositiontryrule-name" id="ref-for-dom-csspositiontryrule-name"><c- g>name</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>, <a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#PutForwards" id="ref-for-PutForwards"><c- g>PutForwards</c-></a>=<a class="idl-code" data-link-type="attribute" href="https://drafts.csswg.org/cssom-1/#dom-cssstyledeclaration-csstext" id="ref-for-dom-cssstyledeclaration-csstext"><c- n>cssText</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration" id="ref-for-cssstyledeclaration"><c- n>CSSStyleDeclaration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSStyleDeclaration" href="#dom-csspositiontryrule-style" id="ref-for-dom-csspositiontryrule-style"><c- g>style</c-></a>; }; </pre> Its <dfn class="dfn-paneled idl-code" data-dfn-for="CSSPositionTryRule" data-dfn-type="attribute" data-export id="dom-csspositiontryrule-name"><code>name</code></dfn> attribute represents the name declared in the rule’s prelude. Its <dfn class="dfn-paneled idl-code" data-dfn-for="CSSPositionTryRule" data-dfn-type="attribute" data-export id="dom-csspositiontryrule-style"><code>style</code></dfn> attribute represents the styles declared in the rule’s body, in the specified order. Only the <a data-link-type="dfn" href="#accepted-position-try-properties" id="ref-for-accepted-position-try-properties">accepted @position-try properties</a> are valid in this rule. <a class="self-link" href="#issue-45287b7f"></a> match the concept of validity to whatever we do in similar situations. <h2 class="heading settled" data-level="7" id="interleaving">7. Appendix: Style & Layout Interleaving<a class="self-link" href="#interleaving"></a></h2> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="interleave" data-lt="style & layout interleave" id="style--layout-interleave">Style & layout interleaving</dfn> is a technique where a style update can occur on a subtree during the layout process, resulting in retroactive updates to elements’ <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①">computed styles</a>. <a class="self-link" href="#issue-56f04754"></a> This is not the correct spec for this concept, it should probably go in <a href="https://www.w3.org/TR/css-cascade/">Cascade</a>, but I need a sketch of it to refer to. Note: <a data-link-type="dfn" href="#style--layout-interleave" id="ref-for-style--layout-interleave①">Style & layout interleaving</a> is already used with <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-3/#container-query" id="ref-for-container-query">container queries</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-3/#container-query-length" id="ref-for-container-query-length">container query lengths</a>. A length like 10cqw is resolved into a <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#computed-length" id="ref-for-computed-length">computed length</a> using layout information about the query container’s size, which can thus trigger <a href="https://www.w3.org/TR/css-transitions-1/">transitions</a> when the container changes size between layouts. The <a data-link-type="dfn" href="#accepted-position-try-properties" id="ref-for-accepted-position-try-properties①">accepted @position-try properties</a> are also <a data-link-type="dfn" href="#style--layout-interleave" id="ref-for-style--layout-interleave②">interleaved</a> when resolving fallback (see <a class="property css" data-link-type="property" href="#propdef-position-try" id="ref-for-propdef-position-try②">position-try</a>). <a class="self-link" href="#issue-584007ee"></a> Obviously this needs way more details filled in, but for now "act like you already do for container queries" suffices. That behavior is also undefined, but at least it’s interoperable (to some extent?). <h2 class="heading settled" data-level="8" id="sec">8. Security Considerations<a class="self-link" href="#sec"></a></h2> No Security issues have been raised against this document. <h2 class="heading settled" data-level="9" id="priv">9. Privacy Considerations<a class="self-link" href="#priv"></a></h2> No Privacy issues have been raised against this document. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code></code>, like this: UAs MUST provide an accessible alternative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#acceptable-anchor-element">acceptable anchor element</a>, in § 2.3 <li><a href="#accepted-position-try-properties">accepted @position-try properties</a>, in § 5.4 <li><a href="#valdef-anchor-scope-all">all</a>, in § 2.2 <li><a href="#valdef-position-visibility-always">always</a>, in § 3.6 <li><a href="#anchor-element">anchor</a>, in § 2.1 <li><a href="#funcdef-anchor">anchor()</a>, in § 3.2 <li><a href="#valdef-justify-self-anchor-center">anchor-center</a>, in § 3.3 <li><a href="#typedef-anchor-element"><anchor-element></a>, in § 3.2 <li><a href="#anchor-element">anchor element</a>, in § 2.1 <li><a href="#anchor-functions">anchor functions</a>, in § 1 <li><a href="#anchor-name">anchor name</a>, in § 2.1 <li><a href="#propdef-anchor-name">anchor-name</a>, in § 2.1 <li><a href="#anchor-positioning">Anchor positioning</a>, in § 1 <li><a href="#propdef-anchor-scope">anchor-scope</a>, in § 2.2 <li><a href="#typedef-anchor-side"><anchor-side></a>, in § 3.2 <li><a href="#typedef-anchor-size"><anchor-size></a>, in § 4.1 <li><a href="#funcdef-anchor-size">anchor-size()</a>, in § 4 <li><a href="#anchor-specifier">anchor specifier</a>, in § 2.3 <li><a href="#valdef-position-visibility-anchors-valid">anchors-valid</a>, in § 3.6 <li><a href="#valdef-position-visibility-anchors-visible">anchors-visible</a>, in § 3.6 <li><a href="#apply-a-position-option">apply a position option</a>, in § 5.5 <li><a href="#valdef-anchor-size-block">block</a>, in § 4.1 <li><a href="#valdef-inset-area-block-end">block-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-block-self-end">block-self-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-block-self-start">block-self-start</a>, in § 3.1.1 <li><a href="#valdef-inset-area-block-start">block-start</a>, in § 3.1.1 <li> bottom <ul> <li><a href="#valdef-anchor-bottom">value for anchor()</a>, in § 3.2 <li><a href="#valdef-inset-area-bottom">value for inset-area, <inset-area></a>, in § 3.1.1 </ul> <li> center <ul> <li><a href="#valdef-anchor-center">value for anchor()</a>, in § 3.2 <li><a href="#valdef-inset-area-center">value for inset-area, <inset-area></a>, in § 3.1.1 </ul> <li><a href="#clipped-by-intervening-elements">clipped by intervening elements</a>, in § 3.6 <li><a href="#csspositiontryrule">CSSPositionTryRule</a>, in § 6.1 <li> <dashed-ident> <ul> <li><a href="#valdef-anchor-dashed-ident">value for anchor()</a>, in § 3.2 <li><a href="#valdef-anchor-scope-dashed-ident">value for anchor-scope</a>, in § 2.2 <li><a href="#valdef-position-try-options-dashed-ident">value for position-try-options</a>, in § 5.1 </ul> <li><a href="#valdef-anchor-name-dashed-ident"><dashed-ident>#</a>, in § 2.1 <li><a href="#valdef-position-try-options-dashed-ident--try-tactic"><dashed-ident> || <try-tactic></a>, in § 5.1 <li><a href="#default-anchor-element">default anchor element</a>, in § 2.4 <li><a href="#default-anchor-specifier">default anchor specifier</a>, in § 2.4 <li><a href="#determine-the-position-fallback-styles">determine the position fallback styles</a>, in § 5.5 <li> end <ul> <li><a href="#valdef-anchor-end">value for anchor()</a>, in § 3.2 <li><a href="#valdef-inset-area-end">value for inset-area, <inset-area></a>, in § 3.1.1 </ul> <li><a href="#valdef-position-try-options-flip-block">flip-block</a>, in § 5.1 <li><a href="#valdef-position-try-options-flip-inline">flip-inline</a>, in § 5.1 <li><a href="#valdef-position-try-options-flip-start">flip-start</a>, in § 5.1 <li><a href="#valdef-anchor-size-height">height</a>, in § 4.1 <li><a href="#valdef-anchor-implicit">implicit</a>, in § 3.2 <li><a href="#implicit-anchor-element">implicit anchor element</a>, in § 2.1.1 <li><a href="#valdef-anchor-size-inline">inline</a>, in § 4.1 <li><a href="#valdef-inset-area-inline-end">inline-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-inline-self-end">inline-self-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-inline-self-start">inline-self-start</a>, in § 3.1.1 <li><a href="#valdef-inset-area-inline-start">inline-start</a>, in § 3.1.1 <li> <inset-area> <ul> <li><a href="#typedef-inset-area">(type)</a>, in § 3.1 <li><a href="#valdef-inset-area-inset-area">value for inset-area</a>, in § 3.1 </ul> <li><a href="#propdef-inset-area">inset-area</a>, in § 3.1 <li><a href="#inset-area-grid">inset-area grid</a>, in § 3.1.1 <li><a href="#valdef-position-try-options-inset-area-inset-area">inset-area( <'inset-area'> )</a>, in § 5.1 <li><a href="#valdef-anchor-inside">inside</a>, in § 3.2 <li><a href="#style--layout-interleave">interleave</a>, in § 7 <li><a href="#valid-anchor-function">invalid anchor function</a>, in § 3.5 <li><a href="#valid-anchor-size-function">invalid anchor-size function</a>, in § 4.2 <li><a href="#last-successful-position-option">last successful position option</a>, in § 5.5 <li> left <ul> <li><a href="#valdef-anchor-left">value for anchor()</a>, in § 3.2 <li><a href="#valdef-inset-area-left">value for inset-area, <inset-area></a>, in § 3.1.1 </ul> <li><a href="#valdef-position-try-order-most-block-size">most-block-size</a>, in § 5.2 <li><a href="#valdef-position-try-order-most-height">most-height</a>, in § 5.2 <li><a href="#valdef-position-try-order-most-inline-size">most-inline-size</a>, in § 5.2 <li><a href="#valdef-position-try-order-most-width">most-width</a>, in § 5.2 <li><a href="#dom-csspositiontryrule-name">name</a>, in § 6.1 <li><a href="#needs-scroll-adjustment">needs scroll adjustment</a>, in § 3.4 <li> none <ul> <li><a href="#valdef-anchor-name-none">value for anchor-name</a>, in § 2.1 <li><a href="#valdef-anchor-scope-none">value for anchor-scope</a>, in § 2.2 <li><a href="#valdef-inset-area-none">value for inset-area</a>, in § 3.1 <li><a href="#valdef-position-try-options-none">value for position-try-options</a>, in § 5.1 </ul> <li><a href="#valdef-position-visibility-no-overflow">no-overflow</a>, in § 3.6 <li><a href="#valdef-position-try-order-normal">normal</a>, in § 5.2 <li><a href="#valdef-anchor-outside">outside</a>, in § 3.2 <li><a href="#valdef-anchor-percentage"><percentage></a>, in § 3.2 <li><a href="#propdef-position-anchor">position-anchor</a>, in § 2.4 <li><a href="#position-fallback-origin">Position Fallback Origin</a>, in § 5.4 <li><a href="#position-option">position option</a>, in § 5.4 <li><a href="#position-options-list">position options list</a>, in § 5.1 <li><a href="#at-ruledef-position-try">@position-try</a>, in § 5.4 <li><a href="#propdef-position-try">position-try</a>, in § 5.3 <li><a href="#propdef-position-try-options">position-try-options</a>, in § 5.1 <li><a href="#propdef-position-try-order">position-try-order</a>, in § 5.2 <li><a href="#propdef-position-visibility">position-visibility</a>, in § 3.6 <li><a href="#required-anchor-reference">required anchor reference</a>, in § 3.6 <li> right <ul> <li><a href="#valdef-anchor-right">value for anchor()</a>, in § 3.2 <li><a href="#valdef-inset-area-right">value for inset-area, <inset-area></a>, in § 3.1.1 </ul> <li><a href="#valdef-anchor-size-self-block">self-block</a>, in § 4.1 <li> self-end <ul> <li><a href="#valdef-anchor-self-end">value for anchor()</a>, in § 3.2 <li><a href="#valdef-inset-area-self-end">value for inset-area, <inset-area></a>, in § 3.1.1 </ul> <li><a href="#valdef-anchor-size-self-inline">self-inline</a>, in § 4.1 <li> self-start <ul> <li><a href="#valdef-anchor-self-start">value for anchor()</a>, in § 3.2 <li><a href="#valdef-inset-area-self-start">value for inset-area, <inset-area></a>, in § 3.1.1 </ul> <li><a href="#snapshotted-scroll-offset">snapshotted scroll offset</a>, in § 3.4 <li><a href="#valdef-inset-area-span-all">span-all</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-block-end">span-block-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-block-start">span-block-start</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-bottom">span-bottom</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-end">span-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-inline-end">span-inline-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-inline-start">span-inline-start</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-start">span-start</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-top">span-top</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-x-end">span-x-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-x-start">span-x-start</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-y-end">span-y-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-span-y-start">span-y-start</a>, in § 3.1.1 <li> start <ul> <li><a href="#valdef-anchor-start">value for anchor()</a>, in § 3.2 <li><a href="#valdef-inset-area-start">value for inset-area, <inset-area></a>, in § 3.1.1 </ul> <li><a href="#strongly-hidden">strongly hidden</a>, in § 3.6 <li><a href="#dom-csspositiontryrule-style">style</a>, in § 6.1 <li><a href="#style--layout-interleave">style & layout interleave</a>, in § 7 <li><a href="#target-anchor-element">target anchor element</a>, in § 2.3 <li> top <ul> <li><a href="#valdef-anchor-top">value for anchor()</a>, in § 3.2 <li><a href="#valdef-inset-area-top">value for inset-area, <inset-area></a>, in § 3.1.1 </ul> <li><a href="#typedef-try-size"><try-size></a>, in § 5.2 <li> <try-tactic> <ul> <li><a href="#typedef-position-try-options-try-tactic">type for position-try-options</a>, in § 5.1 <li><a href="#valdef-position-try-options-try-tactic">value for position-try-options</a>, in § 5.1 </ul> <li><a href="#valid-anchor-function">valid anchor function</a>, in § 3.5 <li><a href="#valid-anchor-size-function">valid anchor-size function</a>, in § 4.2 <li><a href="#valdef-anchor-size-width">width</a>, in § 4.1 <li><a href="#valdef-inset-area-x-end">x-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-x-self-end">x-self-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-x-self-start">x-self-start</a>, in § 3.1.1 <li><a href="#valdef-inset-area-x-start">x-start</a>, in § 3.1.1 <li><a href="#valdef-inset-area-y-end">y-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-y-self-end">y-self-end</a>, in § 3.1.1 <li><a href="#valdef-inset-area-y-self-start">y-self-start</a>, in § 3.1.1 <li><a href="#valdef-inset-area-y-start">y-start</a>, in § 3.1.1 </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-ALIGN-3]</a> defines the following terms: <ul> <li>align-items <li>align-self <li>center <li>end <li>justify-items <li>justify-self <li>normal <li>self-alignment <li>self-alignment properties <li>start </ul> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>border-width </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>margin box <li>margin properties </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>fragment </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>animation origin <li>author origin <li>computed value <li>property <li>revert <li>revert-layer <li>used value <li>user origin </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-6]</a> defines the following terms: <ul> <li>cascade origin </ul> <li> <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms: <ul> <li>opacity </ul> <li> <a data-link-type="biblio">[CSS-CONTAIN-2]</a> defines the following terms: <ul> <li>containment <li>layout containment <li>paint containment <li>relevant to the user <li>skipped contents <li>skipping its contents <li>style containment </ul> <li> <a data-link-type="biblio">[CSS-CONTAIN-3]</a> defines the following terms: <ul> <li>container query <li>container query length <li>content-visibility </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>element </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>containing block <li>containing block chain <li>initial containing block <li>principal box <li>visibility </ul> <li> <a data-link-type="biblio">[CSS-LOGICAL-1]</a> defines the following terms: <ul> <li>inset properties <li>margin-block-end <li>margin-block-start <li>margin-inline-start </ul> <li> <a data-link-type="biblio">[CSS-MASKING-1]</a> defines the following terms: <ul> <li>clip <li>clip-path <li>mask </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>ink overflow rectangle <li>overflow <li>scroll container <li>scroll offset </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-4]</a> defines the following terms: <ul> <li>overflow clip edge </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>absolute position <li>absolutely position <li>absolutely positioned box <li>absolutely positioned element <li>absolutely-positioned <li>auto <li>bottom <li>inset-modified containing block <li>left <li>right <li>top </ul> <li> <a data-link-type="biblio">[CSS-SCOPING-1]</a> defines the following terms: <ul> <li>tree-scoped name <li>tree-scoped reference </ul> <li> <a data-link-type="biblio">[CSS-SHADOW-PARTS-1]</a> defines the following terms: <ul> <li>::part() </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>available space <li>max-height <li>sizing property <li>width </ul> <li> <a data-link-type="biblio">[CSS-SIZING-4]</a> defines the following terms: <ul> <li>last remembered size </ul> <li> <a data-link-type="biblio">[CSS-SYNTAX-3]</a> defines the following terms: <ul> <li><declaration-list> </ul> <li> <a data-link-type="biblio">[CSS-TRANSFORMS-1]</a> defines the following terms: <ul> <li>translate() </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li># <li>, <li><dashed-ident> <li><length-percentage> <li><length> <li><percentage> <li>? <li>computed length <li>math function <li>{a,b} <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>block axis <li>block-axis <li>block-end <li>block-start <li>end <li>inline axis <li>inline-axis <li>inline-end <li>inline-start <li>start <li>writing mode </ul> <li> <a data-link-type="biblio">[CSS21]</a> defines the following terms: <ul> <li>pseudo-elements </ul> <li> <a data-link-type="biblio">[CSSOM-1]</a> defines the following terms: <ul> <li>CSSOMString <li>CSSRule <li>CSSStyleDeclaration <li>cssText </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>root <li>shadow tree <li>tree </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>input <li>li </ul> <li> <a data-link-type="biblio">[INFRA]</a> defines the following terms: <ul> <li>continue <li>for each </ul> <li> <a data-link-type="biblio">[RESIZE-OBSERVER-1]</a> defines the following terms: <ul> <li>ResizeObserver </ul> <li> <a data-link-type="biblio">[SELECTORS-4]</a> defines the following terms: <ul> <li>originating element <li>pseudo-element </ul> <li> <a data-link-type="biblio">[WEBIDL]</a> defines the following terms: <ul> <li>Exposed <li>PutForwards <li>SameObject </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-align-3">[CSS-ALIGN-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-align/"><cite>CSS Box Alignment Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-align/">https://drafts.csswg.org/css-align/</a> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-box-4/">https://drafts.csswg.org/css-box-4/</a> <dt id="biblio-css-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-break-4/">https://drafts.csswg.org/css-break-4/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt id="biblio-css-cascade-6">[CSS-CASCADE-6] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-6/"><cite>CSS Cascading and Inheritance Level 6</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-6/">https://drafts.csswg.org/css-cascade-6/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Chris Lilley; Tab Atkins Jr.; Lea Verou. <a href="https://drafts.csswg.org/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-4/">https://drafts.csswg.org/css-color-4/</a> <dt id="biblio-css-contain-2">[CSS-CONTAIN-2] <dd>Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. <a href="https://drafts.csswg.org/css-contain-2/"><cite>CSS Containment Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-contain-2/">https://drafts.csswg.org/css-contain-2/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd><a href="https://drafts.csswg.org/css-display-4/"><cite>CSS Display Module Level 4</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-display-4/">https://drafts.csswg.org/css-display-4/</a> <dt id="biblio-css-logical-1">[CSS-LOGICAL-1] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-logical-1/"><cite>CSS Logical Properties and Values Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-logical-1/">https://drafts.csswg.org/css-logical-1/</a> <dt id="biblio-css-masking-1">[CSS-MASKING-1] <dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href="https://drafts.fxtf.org/css-masking-1/"><cite>CSS Masking Module Level 1</cite></a>. URL: <a href="https://drafts.fxtf.org/css-masking-1/">https://drafts.fxtf.org/css-masking-1/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://drafts.csswg.org/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-overflow-3/">https://drafts.csswg.org/css-overflow-3/</a> <dt id="biblio-css-overflow-4">[CSS-OVERFLOW-4] <dd>David Baron; Florian Rivoal; Elika Etemad. <a href="https://drafts.csswg.org/css-overflow-4/"><cite>CSS Overflow Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-overflow-4/">https://drafts.csswg.org/css-overflow-4/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-position-3/">https://drafts.csswg.org/css-position-3/</a> <dt id="biblio-css-scoping-1">[CSS-SCOPING-1] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-scoping/"><cite>CSS Scoping Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-scoping/">https://drafts.csswg.org/css-scoping/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-3/">https://drafts.csswg.org/css-sizing-3/</a> <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://drafts.csswg.org/css-syntax/"><cite>CSS Syntax Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-syntax/">https://drafts.csswg.org/css-syntax/</a> <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1] <dd>Simon Fraser; et al. <a href="https://drafts.csswg.org/css-transforms/"><cite>CSS Transforms Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-transforms/">https://drafts.csswg.org/css-transforms/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> <dt id="biblio-css21">[CSS21] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-cssom-1">[CSSOM-1] <dd>Daniel Glazman; Emilio Cobos Álvarez. <a href="https://drafts.csswg.org/cssom/"><cite>CSS Object Model (CSSOM)</cite></a>. URL: <a href="https://drafts.csswg.org/cssom/">https://drafts.csswg.org/cssom/</a> <dt id="biblio-dom">[DOM] <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/"><cite>DOM Standard</cite></a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a> <dt id="biblio-infra">[INFRA] <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/"><cite>Infra Standard</cite></a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a> <dt id="biblio-resize-observer-1">[RESIZE-OBSERVER-1] <dd>Aleks Totic; Greg Whitworth. <a href="https://drafts.csswg.org/resize-observer/"><cite>Resize Observer</cite></a>. URL: <a href="https://drafts.csswg.org/resize-observer/">https://drafts.csswg.org/resize-observer/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/selectors/"><cite>Selectors Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/selectors/">https://drafts.csswg.org/selectors/</a> <dt id="biblio-webidl">[WEBIDL] <dd>Edgar Chen; Timothy Gu. <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-contain-3">[CSS-CONTAIN-3] <dd>Tab Atkins Jr.; Florian Rivoal; Miriam Suzanne. <a href="https://drafts.csswg.org/css-contain-3/"><cite>CSS Containment Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-contain-3/">https://drafts.csswg.org/css-contain-3/</a> <dt id="biblio-css-shadow-parts-1">[CSS-SHADOW-PARTS-1] <dd>Tab Atkins Jr.; Fergal Daly. <a href="https://drafts.csswg.org/css-shadow-parts/"><cite>CSS Shadow Parts</cite></a>. URL: <a href="https://drafts.csswg.org/css-shadow-parts/">https://drafts.csswg.org/css-shadow-parts/</a> <dt id="biblio-css-sizing-4">[CSS-SIZING-4] <dd>Tab Atkins Jr.; Elika Etemad; Jen Simmons. <a href="https://drafts.csswg.org/css-sizing-4/"><cite>CSS Box Sizing Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-4/">https://drafts.csswg.org/css-sizing-4/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-anchor-name" id="ref-for-propdef-anchor-name⑥">anchor-name</a> <td>none | <dashed-ident># <td>none <td>all elements that generate a principal box <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-anchor-scope" id="ref-for-propdef-anchor-scope⑦">anchor-scope</a> <td>none | all | <dashed-ident># <td>none <td>all elements <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-area" id="ref-for-propdef-inset-area⑧">inset-area</a> <td>none | <inset-area> <td>none <td>positioned elements with a default anchor element <td>no <td>n/a <td>TBD <td>per grammar <td>as specified <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-position-anchor" id="ref-for-propdef-position-anchor④">position-anchor</a> <td><anchor-element> <td>implicit <td>absolutely positioned elements <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-position-try" id="ref-for-propdef-position-try③">position-try</a> <td><'position-try-order'>? <'position-try-options'> <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-position-try-options" id="ref-for-propdef-position-try-options⑨">position-try-options</a> <td>none | [ [<dashed-ident> || <try-tactic>] | inset-area( <'inset-area'> ) ]# <td>none <td>absolutely-positioned elements <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-position-try-order" id="ref-for-propdef-position-try-order⑤">position-try-order</a> <td>normal | <try-size> <td>normal <td>absolutely positioned elements <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-position-visibility" id="ref-for-propdef-position-visibility③">position-visibility</a> <td>always | [ anchors-valid || anchors-visible || no-overflow ] <td>anchors-visible <td>absolutely-positioned elements <td>no <td>n/a <td>discrete <td>per grammar <td>as specified </table> </div> <h2 class="no-num no-ref heading settled" id="idl-index">IDL Index<a class="self-link" href="#idl-index"></a></h2> <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#csspositiontryrule"><code><c- g>CSSPositionTryRule</c-></code></a> : <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssrule"><c- n>CSSRule</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-csspositiontryrule-name"><c- g>name</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#SameObject"><c- g>SameObject</c-></a>, <a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#PutForwards"><c- g>PutForwards</c-></a>=<a class="idl-code" data-link-type="attribute" href="https://drafts.csswg.org/cssom-1/#dom-cssstyledeclaration-csstext"><c- n>cssText</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration"><c- n>CSSStyleDeclaration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSStyleDeclaration" href="#dom-csspositiontryrule-style"><c- g>style</c-></a>; }; </pre> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> define the term that actually means this, matching ::before/after/backdrop/etc (but not ::marker/placeholder/etc whose box is not detectable). <a class="issue-return" href="#issue-74e37020" title="Jump to section">↵</a></div> <div class="issue"> Computed value for anchor() probably needs to be the anchor() function, but with the target anchor element resolved. This allows for transitions to work properly with tree-scoped names, and with changing anchor elements. See <a href="https://github.com/w3c/csswg-drafts/issues/8180">Issue 8180</a>. <a class="issue-return" href="#issue-02b9489e" title="Jump to section">↵</a></div> <div class="issue"> Do we need to control which box we’re referring to, so you can align to padding or content edge? <a class="issue-return" href="#issue-3c6fe13f" title="Jump to section">↵</a></div> <div class="issue"> Define the precise timing of the snapshot: updated each frame, before style recalc. <a class="issue-return" href="#issue-5446f06a" title="Jump to section">↵</a></div> <div class="issue"> Does misused anchor() count, like <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width">border-width: anchor(--foo)</a>? I assume no, so we’ll need to split out the concept of invalid usage from a valid usage that fails to find an anchor. <a class="issue-return" href="#issue-1cb463e7" title="Jump to section">↵</a></div> <div class="issue"> What is a required anchor reference? <a class="css" data-link-type="maybe" href="#funcdef-anchor">anchor()</a> functions that don’t have a fallback value; the default anchor *sometimes*? Need more detail here. <a class="issue-return" href="#issue-152d003b" title="Jump to section">↵</a></div> <div class="issue"> Any anchors are missing, or all anchors are missing? I can see use-cases for either, potentially. Do we want to make a decision here, or make it controllable somehow? <a class="issue-return" href="#issue-b50451b1" title="Jump to section">↵</a></div> <div class="issue"> Since only the <a data-link-type="dfn" href="#default-anchor-element">default anchor element</a> triggers scroll-compensation, it’s really the only one that makes sense to condition this on. Right? <a class="issue-return" href="#issue-2f25882e" title="Jump to section">↵</a></div> <div class="issue"> Should any other clipping matter? The <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip">clip</a>/<a class="property css" data-link-type="property" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip-path">clip-path</a>/<a class="property css" data-link-type="property" href="https://drafts.fxtf.org/css-masking-1/#propdef-mask">mask</a> properties? <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity">opacity: 0</a>? <a class="issue-return" href="#issue-efe69095" title="Jump to section">↵</a></div> <div class="issue"> Make sure this definition of clipped is consistent with View Transitions, which wants a similar concept. <a class="issue-return" href="#issue-ceb6dcc9" title="Jump to section">↵</a></div> <div class="issue"> I think we don’t want to make this dependent on any other types of invisibility. Anchoring an <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity">opacity: 0</a> element might make sense, for example. This property’s hiding is based on dynamic state, which you can’t otherwise select on; all of those other sources are caused by other styling, which you can just condition this element on as well if you want to hide it at the same time. <a class="issue-return" href="#issue-8f86aaba" title="Jump to section">↵</a></div> <div class="issue"> Define how the values themselves are changed upon flipping: anchor(top) becomes anchor(bottom); start becomes end; etc. <a class="issue-return" href="#issue-3980b8c2" title="Jump to section">↵</a></div> <div class="issue"> What exactly are the constraints that determine what’s allowed here? Current list is based off of what’s reasonable from Chrome’s experimental impl. We can make a CQ that keys off of which fallback was used to allow more general styling, at least for descendants. <a class="issue-return" href="#issue-14452576" title="Jump to section">↵</a></div> <div class="issue"> Would be useful to be able to detect when your anchor(s) are fully off-screen and suppress your display entirely. For example, tooltips living outside the scroller holding the text they’re anchored to don’t want to just hover over arbitrary parts of the page because their anchor happens to have that position relative to the scrollport. <a class="issue-return" href="#issue-5b530169" title="Jump to section">↵</a></div> <div class="issue"> Make sure the snapshotted scroll offset stuff is correct now, given interleaving. <a class="issue-return" href="#issue-21c2b50d" title="Jump to section">↵</a></div> <div class="issue"> match the concept of validity to whatever we do in similar situations. <a class="issue-return" href="#issue-45287b7f" title="Jump to section">↵</a></div> <div class="issue"> This is not the correct spec for this concept, it should probably go in <a href="https://www.w3.org/TR/css-cascade/">Cascade</a>, but I need a sketch of it to refer to. <a class="issue-return" href="#issue-56f04754" title="Jump to section">↵</a></div> <div class="issue"> Obviously this needs way more details filled in, but for now "act like you already do for container queries" suffices. That behavior is also undefined, but at least it’s interoperable (to some extent?). <a class="issue-return" href="#issue-584007ee" title="Jump to section">↵</a></div> </div> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { const dfnsJson = window.dfnsJson || {}; function genDfnPanel({dfnID, url, dfnText, refSections, external}) { return mk.aside({ class: "dfn-panel", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url}, url), mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), ); } function genAllDfnPanels() { for(const panelData of Object.values(window.dfnpanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); } else { const panel = genDfnPanel(panelData); append(document.body, panel); insertDfnPopupAction(dfn, panel) } } } document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); // Add popup behavior to all dfns to show the corresponding dfn-panel. var dfns = queryAll('.dfn-paneled'); for(let dfn of dfns) { ; } document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }) function hideAllDfnPanels() { // Turn off any currently "on" or "activated" panels. queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>hideDfnPanel(el)); } function showDfnPanel(dfnPanel, dfn) { hideAllDfnPanels(); // Only display one at this time. dfn.setAttribute("aria-expanded", "true"); dfnPanel.classList.add("on"); dfnPanel.style.left = "5px"; dfnPanel.style.top = "0px"; const panelRect = dfnPanel.getBoundingClientRect(); const panelWidth = panelRect.right - panelRect.left; if (panelRect.right > document.body.scrollWidth) { // Panel's overflowing the screen. // Just drop it below the dfn and flip it rightward instead. // This still wont' fix things if the screen is *really* wide, // but fixing that's a lot harder without 'anchor()'. dfnPanel.style.top = "1.5em"; dfnPanel.style.left = "auto"; dfnPanel.style.right = "0px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel(dfnPanel, dfn) { if(!dfn) { dfn = document.getElementById(dfnPanel.getAttribute("data-for")); } dfn.setAttribute("aria-expanded", "false") dfnPanel.classList.remove("on"); dfnPanel.classList.remove("activated"); } function toggleDfnPanel(dfnPanel, dfn) { if(dfnPanel.classList.contains("on")) { hideDfnPanel(dfnPanel, dfn); } else { showDfnPanel(dfnPanel, dfn); } } function insertDfnPopupAction(dfn, dfnPanel) { // Find dfn panel const panelWrapper = document.createElement('span'); panelWrapper.appendChild(dfnPanel); panelWrapper.style.position = "relative"; panelWrapper.style.height = "0px"; dfn.insertAdjacentElement("afterend", panelWrapper); dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { showDfnPanel(dfnPanel, dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfnPanel, dfn); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { pinDfnPanel(dfnPanel); } event.stopPropagation(); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel(dfnPanel, dfn); event.stopPropagation(); event.preventDefault(); } }) } } </script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { const dfnsJson = window.dfnsJson || {}; function genDfnPanel({dfnID, url, dfnText, refSections, external}) { return mk.aside({ class: "dfn-panel", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url}, url), mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), ); } function genAllDfnPanels() { for(const panelData of Object.values(window.dfnpanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); } else { const panel = genDfnPanel(panelData); append(document.body, panel); insertDfnPopupAction(dfn, panel) } } } document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); // Add popup behavior to all dfns to show the corresponding dfn-panel. var dfns = queryAll('.dfn-paneled'); for(let dfn of dfns) { ; } document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }) function hideAllDfnPanels() { // Turn off any currently "on" or "activated" panels. queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>hideDfnPanel(el)); } function showDfnPanel(dfnPanel, dfn) { hideAllDfnPanels(); // Only display one at this time. dfn.setAttribute("aria-expanded", "true"); dfnPanel.classList.add("on"); dfnPanel.style.left = "5px"; dfnPanel.style.top = "0px"; const panelRect = dfnPanel.getBoundingClientRect(); const panelWidth = panelRect.right - panelRect.left; if (panelRect.right > document.body.scrollWidth) { // Panel's overflowing the screen. // Just drop it below the dfn and flip it rightward instead. // This still wont' fix things if the screen is *really* wide, // but fixing that's a lot harder without 'anchor()'. dfnPanel.style.top = "1.5em"; dfnPanel.style.left = "auto"; dfnPanel.style.right = "0px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel(dfnPanel, dfn) { if(!dfn) { dfn = document.getElementById(dfnPanel.getAttribute("data-for")); } dfn.setAttribute("aria-expanded", "false") dfnPanel.classList.remove("on"); dfnPanel.classList.remove("activated"); } function toggleDfnPanel(dfnPanel, dfn) { if(dfnPanel.classList.contains("on")) { hideDfnPanel(dfnPanel, dfn); } else { showDfnPanel(dfnPanel, dfn); } } function insertDfnPopupAction(dfn, dfnPanel) { // Find dfn panel const panelWrapper = document.createElement('span'); panelWrapper.appendChild(dfnPanel); panelWrapper.style.position = "relative"; panelWrapper.style.height = "0px"; dfn.insertAdjacentElement("afterend", panelWrapper); dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { showDfnPanel(dfnPanel, dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfnPanel, dfn); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { pinDfnPanel(dfnPanel); } event.stopPropagation(); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel(dfnPanel, dfn); event.stopPropagation(); event.preventDefault(); } }) } } </script> <script>/* Boilerplate: script-dfn-panel-json */ window.dfnpanelData = {}; window.dfnpanelData['14666244'] = {"dfnID": "14666244", "url": "https://drafts.csswg.org/css-align-3/#propdef-align-items", "dfnText": "align-items", "refSections": [{"refs": [{"id": "ref-for-propdef-align-items"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}], "external": true}; window.dfnpanelData['48350e83'] = {"dfnID": "48350e83", "url": "https://drafts.csswg.org/css-align-3/#propdef-align-self", "dfnText": "align-self", "refSections": [{"refs": [{"id": "ref-for-propdef-align-self"}], "title": "3.1.1. \nResolving <inset-area>s"}, {"refs": [{"id": "ref-for-propdef-align-self\u2460"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-propdef-align-self\u2461"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}], "external": true}; window.dfnpanelData['4bc11993'] = {"dfnID": "4bc11993", "url": "https://drafts.csswg.org/css-align-3/#valdef-self-position-center", "dfnText": "center", "refSections": [{"refs": [{"id": "ref-for-valdef-self-position-center"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}], "external": true}; window.dfnpanelData['2acd09de'] = {"dfnID": "2acd09de", "url": "https://drafts.csswg.org/css-align-3/#valdef-self-position-end", "dfnText": "end", "refSections": [{"refs": [{"id": "ref-for-valdef-self-position-end"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-valdef-self-position-end\u2460"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": true}; window.dfnpanelData['2c77b30f'] = {"dfnID": "2c77b30f", "url": "https://drafts.csswg.org/css-align-3/#propdef-justify-items", "dfnText": "justify-items", "refSections": [{"refs": [{"id": "ref-for-propdef-justify-items"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}], "external": true}; window.dfnpanelData['0fdaa620'] = {"dfnID": "0fdaa620", "url": "https://drafts.csswg.org/css-align-3/#propdef-justify-self", "dfnText": "justify-self", "refSections": [{"refs": [{"id": "ref-for-propdef-justify-self"}], "title": "3.1.1. \nResolving <inset-area>s"}, {"refs": [{"id": "ref-for-propdef-justify-self\u2460"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}], "external": true}; window.dfnpanelData['9f890aae'] = {"dfnID": "9f890aae", "url": "https://drafts.csswg.org/css-align-3/#valdef-align-self-normal", "dfnText": "normal", "refSections": [{"refs": [{"id": "ref-for-valdef-align-self-normal"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-valdef-align-self-normal\u2460"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": true}; window.dfnpanelData['ab61d2d8'] = {"dfnID": "ab61d2d8", "url": "https://drafts.csswg.org/css-align-3/#self-align", "dfnText": "self-alignment", "refSections": [{"refs": [{"id": "ref-for-self-align"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": true}; window.dfnpanelData['876bb33c'] = {"dfnID": "876bb33c", "url": "https://drafts.csswg.org/css-align-3/#self-alignment-properties", "dfnText": "self-alignment properties", "refSections": [{"refs": [{"id": "ref-for-self-alignment-properties"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-self-alignment-properties\u2460"}], "title": "3.1.1. \nResolving <inset-area>s"}, {"refs": [{"id": "ref-for-self-alignment-properties\u2461"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-self-alignment-properties\u2462"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-self-alignment-properties\u2463"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-self-alignment-properties\u2464"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['b8850feb'] = {"dfnID": "b8850feb", "url": "https://drafts.csswg.org/css-align-3/#valdef-self-position-start", "dfnText": "start", "refSections": [{"refs": [{"id": "ref-for-valdef-self-position-start"}], "title": "3.1. The inset-area Property"}], "external": true}; window.dfnpanelData['c9ecad15'] = {"dfnID": "c9ecad15", "url": "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width", "dfnText": "border-width", "refSections": [{"refs": [{"id": "ref-for-propdef-border-width"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['154375a0'] = {"dfnID": "154375a0", "url": "https://drafts.csswg.org/css-box-4/#margin-box", "dfnText": "margin box", "refSections": [{"refs": [{"id": "ref-for-margin-box"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['1ea6c25d'] = {"dfnID": "1ea6c25d", "url": "https://drafts.csswg.org/css-box-4/#margin-properties", "dfnText": "margin properties", "refSections": [{"refs": [{"id": "ref-for-margin-properties"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-margin-properties\u2460"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['9bdefa58'] = {"dfnID": "9bdefa58", "url": "https://drafts.csswg.org/css-break-4/#fragment", "dfnText": "fragment", "refSections": [{"refs": [{"id": "ref-for-fragment"}], "title": "3.2. The anchor() Function"}], "external": true}; window.dfnpanelData['a194a9ee'] = {"dfnID": "a194a9ee", "url": "https://drafts.csswg.org/css-cascade-5/#cascade-origin-animation", "dfnText": "animation origin", "refSections": [{"refs": [{"id": "ref-for-cascade-origin-animation"}, {"id": "ref-for-cascade-origin-animation\u2460"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['39e92270'] = {"dfnID": "39e92270", "url": "https://drafts.csswg.org/css-cascade-5/#cascade-origin-author", "dfnText": "author origin", "refSections": [{"refs": [{"id": "ref-for-cascade-origin-author"}, {"id": "ref-for-cascade-origin-author\u2460"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['9cd25054'] = {"dfnID": "9cd25054", "url": "https://drafts.csswg.org/css-cascade-5/#computed-value", "dfnText": "computed value", "refSections": [{"refs": [{"id": "ref-for-computed-value"}], "title": "5.5. Applying Position Fallback"}, {"refs": [{"id": "ref-for-computed-value\u2460"}], "title": "7. \nAppendix: Style & Layout Interleaving"}], "external": true}; window.dfnpanelData['2edd539e'] = {"dfnID": "2edd539e", "url": "https://drafts.csswg.org/css-cascade-5/#css-property", "dfnText": "property", "refSections": [{"refs": [{"id": "ref-for-css-property"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['bef88b2d'] = {"dfnID": "bef88b2d", "url": "https://drafts.csswg.org/css-cascade-5/#valdef-all-revert", "dfnText": "revert", "refSections": [{"refs": [{"id": "ref-for-valdef-all-revert"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['8e92a2a0'] = {"dfnID": "8e92a2a0", "url": "https://drafts.csswg.org/css-cascade-5/#valdef-all-revert-layer", "dfnText": "revert-layer", "refSections": [{"refs": [{"id": "ref-for-valdef-all-revert-layer"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['a4eb3c57'] = {"dfnID": "a4eb3c57", "url": "https://drafts.csswg.org/css-cascade-5/#used-value", "dfnText": "used value", "refSections": [{"refs": [{"id": "ref-for-used-value"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-used-value\u2460"}, {"id": "ref-for-used-value\u2461"}, {"id": "ref-for-used-value\u2462"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['621960b6'] = {"dfnID": "621960b6", "url": "https://drafts.csswg.org/css-cascade-5/#cascade-origin-user", "dfnText": "user origin", "refSections": [{"refs": [{"id": "ref-for-cascade-origin-user"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['6eacac06'] = {"dfnID": "6eacac06", "url": "https://drafts.csswg.org/css-cascade-6/#origin", "dfnText": "cascade origin", "refSections": [{"refs": [{"id": "ref-for-origin"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['91bfbe18'] = {"dfnID": "91bfbe18", "url": "https://drafts.csswg.org/css-color-4/#propdef-opacity", "dfnText": "opacity", "refSections": [{"refs": [{"id": "ref-for-propdef-opacity"}, {"id": "ref-for-propdef-opacity\u2460"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['1a3880ba'] = {"dfnID": "1a3880ba", "url": "https://drafts.csswg.org/css-contain-2/#containment", "dfnText": "containment", "refSections": [{"refs": [{"id": "ref-for-containment"}], "title": "2.1. Creating an Anchor: the anchor-name property"}], "external": true}; window.dfnpanelData['34b77623'] = {"dfnID": "34b77623", "url": "https://drafts.csswg.org/css-contain-2/#layout-containment", "dfnText": "layout containment", "refSections": [{"refs": [{"id": "ref-for-layout-containment"}], "title": "2.1. Creating an Anchor: the anchor-name property"}], "external": true}; window.dfnpanelData['bb823d37'] = {"dfnID": "bb823d37", "url": "https://drafts.csswg.org/css-contain-2/#paint-containment", "dfnText": "paint containment", "refSections": [{"refs": [{"id": "ref-for-paint-containment"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['283691f4'] = {"dfnID": "283691f4", "url": "https://drafts.csswg.org/css-contain-2/#relevant-to-the-user", "dfnText": "relevant to the user", "refSections": [{"refs": [{"id": "ref-for-relevant-to-the-user"}, {"id": "ref-for-relevant-to-the-user\u2460"}, {"id": "ref-for-relevant-to-the-user\u2461"}], "title": "2.5. \nAnchor Relevance"}], "external": true}; window.dfnpanelData['9e5e3305'] = {"dfnID": "9e5e3305", "url": "https://drafts.csswg.org/css-contain-2/#skips-its-contents", "dfnText": "skipped contents", "refSections": [{"refs": [{"id": "ref-for-skips-its-contents"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-skips-its-contents\u2460"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-skips-its-contents\u2461"}], "title": "2.5. \nAnchor Relevance"}], "external": true}; window.dfnpanelData['5f1936e9'] = {"dfnID": "5f1936e9", "url": "https://drafts.csswg.org/css-contain-2/#skips-its-contents", "dfnText": "skipping its contents", "refSections": [{"refs": [{"id": "ref-for-skips-its-contents"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-skips-its-contents\u2460"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-skips-its-contents\u2461"}], "title": "2.5. \nAnchor Relevance"}], "external": true}; window.dfnpanelData['9b54ada7'] = {"dfnID": "9b54ada7", "url": "https://drafts.csswg.org/css-contain-2/#style-containment", "dfnText": "style containment", "refSections": [{"refs": [{"id": "ref-for-style-containment"}], "title": "2.1. Creating an Anchor: the anchor-name property"}], "external": true}; window.dfnpanelData['a92d2c42'] = {"dfnID": "a92d2c42", "url": "https://drafts.csswg.org/css-contain-3/#container-query", "dfnText": "container query", "refSections": [{"refs": [{"id": "ref-for-container-query"}], "title": "7. \nAppendix: Style & Layout Interleaving"}], "external": true}; window.dfnpanelData['c7fc65e0'] = {"dfnID": "c7fc65e0", "url": "https://drafts.csswg.org/css-contain-3/#container-query-length", "dfnText": "container query length", "refSections": [{"refs": [{"id": "ref-for-container-query-length"}], "title": "7. \nAppendix: Style & Layout Interleaving"}], "external": true}; window.dfnpanelData['753a5375'] = {"dfnID": "753a5375", "url": "https://drafts.csswg.org/css-contain-3/#propdef-content-visibility", "dfnText": "content-visibility", "refSections": [{"refs": [{"id": "ref-for-propdef-content-visibility"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-propdef-content-visibility\u2460"}], "title": "2.5. \nAnchor Relevance"}], "external": true}; window.dfnpanelData['174d5a21'] = {"dfnID": "174d5a21", "url": "https://drafts.csswg.org/css-display-3/#elements", "dfnText": "element", "refSections": [{"refs": [{"id": "ref-for-elements"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-elements\u2460"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['ea663a43'] = {"dfnID": "ea663a43", "url": "https://drafts.csswg.org/css-display-4/#containing-block", "dfnText": "containing block", "refSections": [{"refs": [{"id": "ref-for-containing-block"}, {"id": "ref-for-containing-block\u2460"}, {"id": "ref-for-containing-block\u2461"}, {"id": "ref-for-containing-block\u2462"}, {"id": "ref-for-containing-block\u2463"}, {"id": "ref-for-containing-block\u2464"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-containing-block\u2465"}, {"id": "ref-for-containing-block\u2466"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-containing-block\u2467"}, {"id": "ref-for-containing-block\u2468"}, {"id": "ref-for-containing-block\u2460\u24ea"}, {"id": "ref-for-containing-block\u2460\u2460"}, {"id": "ref-for-containing-block\u2460\u2461"}], "title": "3.1.1. \nResolving <inset-area>s"}, {"refs": [{"id": "ref-for-containing-block\u2460\u2462"}, {"id": "ref-for-containing-block\u2460\u2463"}, {"id": "ref-for-containing-block\u2460\u2464"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-containing-block\u2460\u2465"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-containing-block\u2460\u2466"}], "title": "4.1. The anchor-size() Function"}, {"refs": [{"id": "ref-for-containing-block\u2460\u2467"}, {"id": "ref-for-containing-block\u2460\u2468"}], "title": "5. Overflow Management"}], "external": true}; window.dfnpanelData['58157ca0'] = {"dfnID": "58157ca0", "url": "https://drafts.csswg.org/css-display-4/#containing-block-chain", "dfnText": "containing block chain", "refSections": [{"refs": [{"id": "ref-for-containing-block-chain"}], "title": "2.3. Finding an Anchor"}], "external": true}; window.dfnpanelData['8d0ede2c'] = {"dfnID": "8d0ede2c", "url": "https://drafts.csswg.org/css-display-4/#initial-containing-block", "dfnText": "initial containing block", "refSections": [{"refs": [{"id": "ref-for-initial-containing-block"}], "title": "2.3. Finding an Anchor"}], "external": true}; window.dfnpanelData['80eb9508'] = {"dfnID": "80eb9508", "url": "https://drafts.csswg.org/css-display-4/#principal-box", "dfnText": "principal box", "refSections": [{"refs": [{"id": "ref-for-principal-box"}, {"id": "ref-for-principal-box\u2460"}], "title": "2.1. Creating an Anchor: the anchor-name property"}], "external": true}; window.dfnpanelData['12f8fb07'] = {"dfnID": "12f8fb07", "url": "https://drafts.csswg.org/css-display-4/#propdef-visibility", "dfnText": "visibility", "refSections": [{"refs": [{"id": "ref-for-propdef-visibility"}, {"id": "ref-for-propdef-visibility\u2460"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['f616a86d'] = {"dfnID": "f616a86d", "url": "https://drafts.csswg.org/css-logical-1/#inset-properties", "dfnText": "inset properties", "refSections": [{"refs": [{"id": "ref-for-inset-properties"}], "title": "3. Anchor-Based Positioning"}, {"refs": [{"id": "ref-for-inset-properties\u2460"}, {"id": "ref-for-inset-properties\u2461"}, {"id": "ref-for-inset-properties\u2462"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-inset-properties\u2463"}, {"id": "ref-for-inset-properties\u2464"}, {"id": "ref-for-inset-properties\u2465"}, {"id": "ref-for-inset-properties\u2466"}, {"id": "ref-for-inset-properties\u2467"}, {"id": "ref-for-inset-properties\u2468"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-inset-properties\u2460\u24ea"}, {"id": "ref-for-inset-properties\u2460\u2460"}, {"id": "ref-for-inset-properties\u2460\u2461"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-inset-properties\u2460\u2462"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-inset-properties\u2460\u2463"}, {"id": "ref-for-inset-properties\u2460\u2464"}, {"id": "ref-for-inset-properties\u2460\u2465"}], "title": "3.5. Validity"}, {"refs": [{"id": "ref-for-inset-properties\u2460\u2466"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-inset-properties\u2460\u2467"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['052c1740'] = {"dfnID": "052c1740", "url": "https://drafts.csswg.org/css-logical-1/#propdef-margin-block-end", "dfnText": "margin-block-end", "refSections": [{"refs": [{"id": "ref-for-propdef-margin-block-end"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['12629b81'] = {"dfnID": "12629b81", "url": "https://drafts.csswg.org/css-logical-1/#propdef-margin-block-start", "dfnText": "margin-block-start", "refSections": [{"refs": [{"id": "ref-for-propdef-margin-block-start"}, {"id": "ref-for-propdef-margin-block-start\u2460"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['a6e20c61'] = {"dfnID": "a6e20c61", "url": "https://drafts.csswg.org/css-logical-1/#propdef-margin-inline-start", "dfnText": "margin-inline-start", "refSections": [{"refs": [{"id": "ref-for-propdef-margin-inline-start"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['6b14b18a'] = {"dfnID": "6b14b18a", "url": "https://drafts.fxtf.org/css-masking-1/#propdef-clip", "dfnText": "clip", "refSections": [{"refs": [{"id": "ref-for-propdef-clip"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['77f17203'] = {"dfnID": "77f17203", "url": "https://drafts.fxtf.org/css-masking-1/#propdef-clip-path", "dfnText": "clip-path", "refSections": [{"refs": [{"id": "ref-for-propdef-clip-path"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['bd765d87'] = {"dfnID": "bd765d87", "url": "https://drafts.fxtf.org/css-masking-1/#propdef-mask", "dfnText": "mask", "refSections": [{"refs": [{"id": "ref-for-propdef-mask"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['3c7a8d55'] = {"dfnID": "3c7a8d55", "url": "https://drafts.csswg.org/css-overflow-3/#ink-overflow-rectangle", "dfnText": "ink overflow rectangle", "refSections": [{"refs": [{"id": "ref-for-ink-overflow-rectangle"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['86928bde'] = {"dfnID": "86928bde", "url": "https://drafts.csswg.org/css-overflow-3/#propdef-overflow", "dfnText": "overflow", "refSections": [{"refs": [{"id": "ref-for-propdef-overflow"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['86923d07'] = {"dfnID": "86923d07", "url": "https://drafts.csswg.org/css-overflow-3/#scroll-container", "dfnText": "scroll container", "refSections": [{"refs": [{"id": "ref-for-scroll-container"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-scroll-container\u2460"}, {"id": "ref-for-scroll-container\u2461"}, {"id": "ref-for-scroll-container\u2462"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-scroll-container\u2463"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['79d52d95'] = {"dfnID": "79d52d95", "url": "https://drafts.csswg.org/css-overflow-3/#scroll-offset", "dfnText": "scroll offset", "refSections": [{"refs": [{"id": "ref-for-scroll-offset"}], "title": "3.4. Taking Scroll Into Account"}], "external": true}; window.dfnpanelData['01b92003'] = {"dfnID": "01b92003", "url": "https://drafts.csswg.org/css-overflow-4/#overflow-clip-edge", "dfnText": "overflow clip edge", "refSections": [{"refs": [{"id": "ref-for-overflow-clip-edge"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": true}; window.dfnpanelData['51330c07'] = {"dfnID": "51330c07", "url": "https://drafts.csswg.org/css-position-3/#absolute-position", "dfnText": "absolute position", "refSections": [{"refs": [{"id": "ref-for-absolute-position"}, {"id": "ref-for-absolute-position\u2460"}], "title": "1. Introduction"}, {"refs": [{"id": "ref-for-absolute-position\u2461"}, {"id": "ref-for-absolute-position\u2462"}, {"id": "ref-for-absolute-position\u2463"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-absolute-position\u2464"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-absolute-position\u2465"}], "title": "3. Anchor-Based Positioning"}, {"refs": [{"id": "ref-for-absolute-position\u2466"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-absolute-position\u2467"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-absolute-position\u2468"}, {"id": "ref-for-absolute-position\u2460\u24ea"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2460"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2461"}], "title": "3.5. Validity"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2462"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2463"}], "title": "4. Anchor-Based Sizing"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2464"}], "title": "4.2. Validity"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2465"}], "title": "5. Overflow Management"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2466"}, {"id": "ref-for-absolute-position\u2460\u2467"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2468"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-absolute-position\u2461\u24ea"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['51fe9b84'] = {"dfnID": "51fe9b84", "url": "https://drafts.csswg.org/css-position-3/#absolute-position", "dfnText": "absolutely position", "refSections": [{"refs": [{"id": "ref-for-absolute-position"}, {"id": "ref-for-absolute-position\u2460"}], "title": "1. Introduction"}, {"refs": [{"id": "ref-for-absolute-position\u2461"}, {"id": "ref-for-absolute-position\u2462"}, {"id": "ref-for-absolute-position\u2463"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-absolute-position\u2464"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-absolute-position\u2465"}], "title": "3. Anchor-Based Positioning"}, {"refs": [{"id": "ref-for-absolute-position\u2466"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-absolute-position\u2467"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-absolute-position\u2468"}, {"id": "ref-for-absolute-position\u2460\u24ea"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2460"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2461"}], "title": "3.5. Validity"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2462"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2463"}], "title": "4. Anchor-Based Sizing"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2464"}], "title": "4.2. Validity"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2465"}], "title": "5. Overflow Management"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2466"}, {"id": "ref-for-absolute-position\u2460\u2467"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2468"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-absolute-position\u2461\u24ea"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['e73f6d8c'] = {"dfnID": "e73f6d8c", "url": "https://drafts.csswg.org/css-position-3/#absolute-position", "dfnText": "absolutely positioned box", "refSections": [{"refs": [{"id": "ref-for-absolute-position"}, {"id": "ref-for-absolute-position\u2460"}], "title": "1. Introduction"}, {"refs": [{"id": "ref-for-absolute-position\u2461"}, {"id": "ref-for-absolute-position\u2462"}, {"id": "ref-for-absolute-position\u2463"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-absolute-position\u2464"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-absolute-position\u2465"}], "title": "3. Anchor-Based Positioning"}, {"refs": [{"id": "ref-for-absolute-position\u2466"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-absolute-position\u2467"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-absolute-position\u2468"}, {"id": "ref-for-absolute-position\u2460\u24ea"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2460"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2461"}], "title": "3.5. Validity"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2462"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2463"}], "title": "4. Anchor-Based Sizing"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2464"}], "title": "4.2. Validity"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2465"}], "title": "5. Overflow Management"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2466"}, {"id": "ref-for-absolute-position\u2460\u2467"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2468"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-absolute-position\u2461\u24ea"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['5e330cf0'] = {"dfnID": "5e330cf0", "url": "https://drafts.csswg.org/css-position-3/#absolute-position", "dfnText": "absolutely positioned element", "refSections": [{"refs": [{"id": "ref-for-absolute-position"}, {"id": "ref-for-absolute-position\u2460"}], "title": "1. Introduction"}, {"refs": [{"id": "ref-for-absolute-position\u2461"}, {"id": "ref-for-absolute-position\u2462"}, {"id": "ref-for-absolute-position\u2463"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-absolute-position\u2464"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-absolute-position\u2465"}], "title": "3. Anchor-Based Positioning"}, {"refs": [{"id": "ref-for-absolute-position\u2466"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-absolute-position\u2467"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-absolute-position\u2468"}, {"id": "ref-for-absolute-position\u2460\u24ea"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2460"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2461"}], "title": "3.5. Validity"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2462"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2463"}], "title": "4. Anchor-Based Sizing"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2464"}], "title": "4.2. Validity"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2465"}], "title": "5. Overflow Management"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2466"}, {"id": "ref-for-absolute-position\u2460\u2467"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2468"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-absolute-position\u2461\u24ea"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['14fe327c'] = {"dfnID": "14fe327c", "url": "https://drafts.csswg.org/css-position-3/#absolute-position", "dfnText": "absolutely-positioned", "refSections": [{"refs": [{"id": "ref-for-absolute-position"}, {"id": "ref-for-absolute-position\u2460"}], "title": "1. Introduction"}, {"refs": [{"id": "ref-for-absolute-position\u2461"}, {"id": "ref-for-absolute-position\u2462"}, {"id": "ref-for-absolute-position\u2463"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-absolute-position\u2464"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-absolute-position\u2465"}], "title": "3. Anchor-Based Positioning"}, {"refs": [{"id": "ref-for-absolute-position\u2466"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-absolute-position\u2467"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-absolute-position\u2468"}, {"id": "ref-for-absolute-position\u2460\u24ea"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2460"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2461"}], "title": "3.5. Validity"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2462"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2463"}], "title": "4. Anchor-Based Sizing"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2464"}], "title": "4.2. Validity"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2465"}], "title": "5. Overflow Management"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2466"}, {"id": "ref-for-absolute-position\u2460\u2467"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-absolute-position\u2460\u2468"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-absolute-position\u2461\u24ea"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['61111288'] = {"dfnID": "61111288", "url": "https://drafts.csswg.org/css-position-3/#valdef-top-auto", "dfnText": "auto", "refSections": [{"refs": [{"id": "ref-for-valdef-top-auto"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-valdef-top-auto\u2460"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}], "external": true}; window.dfnpanelData['a58a3cd8'] = {"dfnID": "a58a3cd8", "url": "https://drafts.csswg.org/css-position-3/#propdef-bottom", "dfnText": "bottom", "refSections": [{"refs": [{"id": "ref-for-propdef-bottom"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-propdef-bottom\u2460"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}], "external": true}; window.dfnpanelData['047bda42'] = {"dfnID": "047bda42", "url": "https://drafts.csswg.org/css-position-3/#inset-modified-containing-block", "dfnText": "inset-modified containing block", "refSections": [{"refs": [{"id": "ref-for-inset-modified-containing-block"}, {"id": "ref-for-inset-modified-containing-block\u2460"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-inset-modified-containing-block\u2461"}, {"id": "ref-for-inset-modified-containing-block\u2462"}, {"id": "ref-for-inset-modified-containing-block\u2463"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-inset-modified-containing-block\u2464"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-inset-modified-containing-block\u2465"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-inset-modified-containing-block\u2466"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-inset-modified-containing-block\u2467"}, {"id": "ref-for-inset-modified-containing-block\u2468"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['dde41168'] = {"dfnID": "dde41168", "url": "https://drafts.csswg.org/css-position-3/#propdef-left", "dfnText": "left", "refSections": [{"refs": [{"id": "ref-for-propdef-left"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-propdef-left\u2460"}], "title": "3.5. Validity"}], "external": true}; window.dfnpanelData['b0b8d8c0'] = {"dfnID": "b0b8d8c0", "url": "https://drafts.csswg.org/css-position-3/#propdef-right", "dfnText": "right", "refSections": [{"refs": [{"id": "ref-for-propdef-right"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-propdef-right\u2460"}], "title": "3.5. Validity"}], "external": true}; window.dfnpanelData['e1483d91'] = {"dfnID": "e1483d91", "url": "https://drafts.csswg.org/css-position-3/#propdef-top", "dfnText": "top", "refSections": [{"refs": [{"id": "ref-for-propdef-top"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-propdef-top\u2460"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}], "external": true}; window.dfnpanelData['778f8dbd'] = {"dfnID": "778f8dbd", "url": "https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name", "dfnText": "tree-scoped name", "refSections": [{"refs": [{"id": "ref-for-css-tree-scoped-name"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-css-tree-scoped-name\u2460"}], "title": "2.3. Finding an Anchor"}], "external": true}; window.dfnpanelData['c304f669'] = {"dfnID": "c304f669", "url": "https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference", "dfnText": "tree-scoped reference", "refSections": [{"refs": [{"id": "ref-for-css-tree-scoped-reference"}, {"id": "ref-for-css-tree-scoped-reference\u2460"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-css-tree-scoped-reference\u2461"}], "title": "3.2. The anchor() Function"}], "external": true}; window.dfnpanelData['2988c385'] = {"dfnID": "2988c385", "url": "https://drafts.csswg.org/css-shadow-parts-1/#selectordef-part", "dfnText": "::part()", "refSections": [{"refs": [{"id": "ref-for-selectordef-part"}], "title": "2.3. Finding an Anchor"}], "external": true}; window.dfnpanelData['11ee6625'] = {"dfnID": "11ee6625", "url": "https://drafts.csswg.org/css-sizing-3/#available", "dfnText": "available space", "refSections": [{"refs": [{"id": "ref-for-available"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}], "external": true}; window.dfnpanelData['9e39189b'] = {"dfnID": "9e39189b", "url": "https://drafts.csswg.org/css-sizing-3/#propdef-max-height", "dfnText": "max-height", "refSections": [{"refs": [{"id": "ref-for-propdef-max-height"}], "title": "3.1. The inset-area Property"}], "external": true}; window.dfnpanelData['a0e35b6d'] = {"dfnID": "a0e35b6d", "url": "https://drafts.csswg.org/css-sizing-3/#sizing-property", "dfnText": "sizing property", "refSections": [{"refs": [{"id": "ref-for-sizing-property"}], "title": "4. Anchor-Based Sizing"}, {"refs": [{"id": "ref-for-sizing-property\u2460"}], "title": "4.2. Validity"}, {"refs": [{"id": "ref-for-sizing-property\u2461"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-sizing-property\u2462"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['88643fe0'] = {"dfnID": "88643fe0", "url": "https://drafts.csswg.org/css-sizing-3/#propdef-width", "dfnText": "width", "refSections": [{"refs": [{"id": "ref-for-propdef-width"}], "title": "4.1. The anchor-size() Function"}], "external": true}; window.dfnpanelData['b2be0511'] = {"dfnID": "b2be0511", "url": "https://drafts.csswg.org/css-sizing-4/#last-remembered", "dfnText": "last remembered size", "refSections": [{"refs": [{"id": "ref-for-last-remembered"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['84252421'] = {"dfnID": "84252421", "url": "https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list", "dfnText": "<declaration-list>", "refSections": [{"refs": [{"id": "ref-for-typedef-declaration-list"}, {"id": "ref-for-typedef-declaration-list\u2460"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['0d7c5bb2'] = {"dfnID": "0d7c5bb2", "url": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-translate", "dfnText": "translate()", "refSections": [{"refs": [{"id": "ref-for-funcdef-transform-translate"}], "title": "3.2. The anchor() Function"}], "external": true}; window.dfnpanelData['68487d22'] = {"dfnID": "68487d22", "url": "https://drafts.csswg.org/css-values-4/#mult-comma", "dfnText": "#", "refSections": [{"refs": [{"id": "ref-for-mult-comma"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-mult-comma\u2460"}], "title": "2.2. \nScoping Anchor Names: the anchor-scope property"}, {"refs": [{"id": "ref-for-mult-comma\u2461"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['9f9120ff'] = {"dfnID": "9f9120ff", "url": "https://drafts.csswg.org/css-values-4/#comb-comma", "dfnText": ",", "refSections": [{"refs": [{"id": "ref-for-comb-comma"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-comb-comma\u2460"}], "title": "4.1. The anchor-size() Function"}], "external": true}; window.dfnpanelData['8a427103'] = {"dfnID": "8a427103", "url": "https://drafts.csswg.org/css-values-4/#typedef-dashed-ident", "dfnText": "<dashed-ident>", "refSections": [{"refs": [{"id": "ref-for-typedef-dashed-ident"}, {"id": "ref-for-typedef-dashed-ident\u2460"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-typedef-dashed-ident\u2461"}, {"id": "ref-for-typedef-dashed-ident\u2462"}], "title": "2.2. \nScoping Anchor Names: the anchor-scope property"}, {"refs": [{"id": "ref-for-typedef-dashed-ident\u2463"}, {"id": "ref-for-typedef-dashed-ident\u2464"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-typedef-dashed-ident\u2465"}, {"id": "ref-for-typedef-dashed-ident\u2466"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-typedef-dashed-ident\u2467"}, {"id": "ref-for-typedef-dashed-ident\u2468"}, {"id": "ref-for-typedef-dashed-ident\u2460\u24ea"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-typedef-dashed-ident\u2460\u2460"}, {"id": "ref-for-typedef-dashed-ident\u2460\u2461"}], "title": "5.4. The @position-try Rule"}], "external": true}; window.dfnpanelData['18222566'] = {"dfnID": "18222566", "url": "https://drafts.csswg.org/css-values-4/#typedef-length-percentage", "dfnText": "<length-percentage>", "refSections": [{"refs": [{"id": "ref-for-typedef-length-percentage"}, {"id": "ref-for-typedef-length-percentage\u2460"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-typedef-length-percentage\u2461"}], "title": "4.1. The anchor-size() Function"}], "external": true}; window.dfnpanelData['fb030e6c'] = {"dfnID": "fb030e6c", "url": "https://drafts.csswg.org/css-values-4/#length-value", "dfnText": "<length>", "refSections": [{"refs": [{"id": "ref-for-length-value"}, {"id": "ref-for-length-value\u2460"}, {"id": "ref-for-length-value\u2461"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-length-value\u2462"}], "title": "4. Anchor-Based Sizing"}, {"refs": [{"id": "ref-for-length-value\u2463"}], "title": "4.1. The anchor-size() Function"}], "external": true}; window.dfnpanelData['15f5b381'] = {"dfnID": "15f5b381", "url": "https://drafts.csswg.org/css-values-4/#percentage-value", "dfnText": "<percentage>", "refSections": [{"refs": [{"id": "ref-for-percentage-value"}, {"id": "ref-for-percentage-value\u2460"}], "title": "3.2. The anchor() Function"}], "external": true}; window.dfnpanelData['537cf076'] = {"dfnID": "537cf076", "url": "https://drafts.csswg.org/css-values-4/#mult-opt", "dfnText": "?", "refSections": [{"refs": [{"id": "ref-for-mult-opt"}, {"id": "ref-for-mult-opt\u2460"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-mult-opt\u2461"}, {"id": "ref-for-mult-opt\u2462"}], "title": "4.1. The anchor-size() Function"}, {"refs": [{"id": "ref-for-mult-opt\u2463"}], "title": "5.3. The position-try Shorthand"}], "external": true}; window.dfnpanelData['65ce7ccc'] = {"dfnID": "65ce7ccc", "url": "https://drafts.csswg.org/css-values-4/#computed-length", "dfnText": "computed length", "refSections": [{"refs": [{"id": "ref-for-computed-length"}], "title": "7. \nAppendix: Style & Layout Interleaving"}], "external": true}; window.dfnpanelData['2a26d53d'] = {"dfnID": "2a26d53d", "url": "https://drafts.csswg.org/css-values-4/#math-function", "dfnText": "math function", "refSections": [{"refs": [{"id": "ref-for-math-function"}], "title": "3.2. The anchor() Function"}], "external": true}; window.dfnpanelData['938ba280'] = {"dfnID": "938ba280", "url": "https://drafts.csswg.org/css-values-4/#mult-num-range", "dfnText": "{a,b}", "refSections": [{"refs": [{"id": "ref-for-mult-num-range"}, {"id": "ref-for-mult-num-range\u2460"}], "title": "3.1. The inset-area Property"}], "external": true}; window.dfnpanelData['6ec67710'] = {"dfnID": "6ec67710", "url": "https://drafts.csswg.org/css-values-4/#comb-one", "dfnText": "|", "refSections": [{"refs": [{"id": "ref-for-comb-one"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-comb-one\u2460"}, {"id": "ref-for-comb-one\u2461"}], "title": "2.2. \nScoping Anchor Names: the anchor-scope property"}, {"refs": [{"id": "ref-for-comb-one\u2462"}, {"id": "ref-for-comb-one\u2463"}, {"id": "ref-for-comb-one\u2464"}, {"id": "ref-for-comb-one\u2465"}, {"id": "ref-for-comb-one\u2466"}, {"id": "ref-for-comb-one\u2467"}, {"id": "ref-for-comb-one\u2468"}, {"id": "ref-for-comb-one\u2460\u24ea"}, {"id": "ref-for-comb-one\u2460\u2460"}, {"id": "ref-for-comb-one\u2460\u2461"}, {"id": "ref-for-comb-one\u2460\u2462"}, {"id": "ref-for-comb-one\u2460\u2463"}, {"id": "ref-for-comb-one\u2460\u2464"}, {"id": "ref-for-comb-one\u2460\u2465"}, {"id": "ref-for-comb-one\u2460\u2466"}, {"id": "ref-for-comb-one\u2460\u2467"}, {"id": "ref-for-comb-one\u2460\u2468"}, {"id": "ref-for-comb-one\u2461\u24ea"}, {"id": "ref-for-comb-one\u2461\u2460"}, {"id": "ref-for-comb-one\u2461\u2461"}, {"id": "ref-for-comb-one\u2461\u2462"}, {"id": "ref-for-comb-one\u2461\u2463"}, {"id": "ref-for-comb-one\u2461\u2464"}, {"id": "ref-for-comb-one\u2461\u2465"}, {"id": "ref-for-comb-one\u2461\u2466"}, {"id": "ref-for-comb-one\u2461\u2467"}, {"id": "ref-for-comb-one\u2461\u2468"}, {"id": "ref-for-comb-one\u2462\u24ea"}, {"id": "ref-for-comb-one\u2462\u2460"}, {"id": "ref-for-comb-one\u2462\u2461"}, {"id": "ref-for-comb-one\u2462\u2462"}, {"id": "ref-for-comb-one\u2462\u2463"}, {"id": "ref-for-comb-one\u2462\u2464"}, {"id": "ref-for-comb-one\u2462\u2465"}, {"id": "ref-for-comb-one\u2462\u2466"}, {"id": "ref-for-comb-one\u2462\u2467"}, {"id": "ref-for-comb-one\u2462\u2468"}, {"id": "ref-for-comb-one\u2463\u24ea"}, {"id": "ref-for-comb-one\u2463\u2460"}, {"id": "ref-for-comb-one\u2463\u2461"}, {"id": "ref-for-comb-one\u2463\u2462"}, {"id": "ref-for-comb-one\u2463\u2463"}, {"id": "ref-for-comb-one\u2463\u2464"}, {"id": "ref-for-comb-one\u2463\u2465"}, {"id": "ref-for-comb-one\u2463\u2466"}, {"id": "ref-for-comb-one\u2463\u2467"}, {"id": "ref-for-comb-one\u2463\u2468"}, {"id": "ref-for-comb-one\u2464\u24ea"}, {"id": "ref-for-comb-one\u2464\u2460"}, {"id": "ref-for-comb-one\u2464\u2461"}, {"id": "ref-for-comb-one\u2464\u2462"}, {"id": "ref-for-comb-one\u2464\u2463"}, {"id": "ref-for-comb-one\u2464\u2464"}, {"id": "ref-for-comb-one\u2464\u2465"}, {"id": "ref-for-comb-one\u2464\u2466"}, {"id": "ref-for-comb-one\u2464\u2467"}, {"id": "ref-for-comb-one\u2464\u2468"}, {"id": "ref-for-comb-one\u2465\u24ea"}, {"id": "ref-for-comb-one\u2465\u2460"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-comb-one\u2465\u2461"}, {"id": "ref-for-comb-one\u2465\u2462"}, {"id": "ref-for-comb-one\u2465\u2463"}, {"id": "ref-for-comb-one\u2465\u2464"}, {"id": "ref-for-comb-one\u2465\u2465"}, {"id": "ref-for-comb-one\u2465\u2466"}, {"id": "ref-for-comb-one\u2465\u2467"}, {"id": "ref-for-comb-one\u2465\u2468"}, {"id": "ref-for-comb-one\u2466\u24ea"}, {"id": "ref-for-comb-one\u2466\u2460"}, {"id": "ref-for-comb-one\u2466\u2461"}, {"id": "ref-for-comb-one\u2466\u2462"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-comb-one\u2466\u2463"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-comb-one\u2466\u2464"}, {"id": "ref-for-comb-one\u2466\u2465"}, {"id": "ref-for-comb-one\u2466\u2466"}, {"id": "ref-for-comb-one\u2466\u2467"}, {"id": "ref-for-comb-one\u2466\u2468"}], "title": "4.1. The anchor-size() Function"}, {"refs": [{"id": "ref-for-comb-one\u2467\u24ea"}, {"id": "ref-for-comb-one\u2467\u2460"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-comb-one\u2467\u2461"}, {"id": "ref-for-comb-one\u2467\u2462"}, {"id": "ref-for-comb-one\u2467\u2463"}, {"id": "ref-for-comb-one\u2467\u2464"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}], "external": true}; window.dfnpanelData['8a82fda1'] = {"dfnID": "8a82fda1", "url": "https://drafts.csswg.org/css-values-4/#comb-any", "dfnText": "||", "refSections": [{"refs": [{"id": "ref-for-comb-any"}, {"id": "ref-for-comb-any\u2460"}, {"id": "ref-for-comb-any\u2461"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-comb-any\u2462"}, {"id": "ref-for-comb-any\u2463"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-comb-any\u2464"}, {"id": "ref-for-comb-any\u2465"}, {"id": "ref-for-comb-any\u2466"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['e1ab41b7'] = {"dfnID": "e1ab41b7", "url": "https://drafts.csswg.org/css-writing-modes-4/#block-axis", "dfnText": "block axis", "refSections": [{"refs": [{"id": "ref-for-block-axis"}, {"id": "ref-for-block-axis\u2460"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['32995ff0'] = {"dfnID": "32995ff0", "url": "https://drafts.csswg.org/css-writing-modes-4/#block-axis", "dfnText": "block-axis", "refSections": [{"refs": [{"id": "ref-for-block-axis"}, {"id": "ref-for-block-axis\u2460"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['37c3d179'] = {"dfnID": "37c3d179", "url": "https://drafts.csswg.org/css-writing-modes-4/#block-end", "dfnText": "block-end", "refSections": [{"refs": [{"id": "ref-for-block-end"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['1370dad0'] = {"dfnID": "1370dad0", "url": "https://drafts.csswg.org/css-writing-modes-4/#block-start", "dfnText": "block-start", "refSections": [{"refs": [{"id": "ref-for-block-start"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['7bc19a34'] = {"dfnID": "7bc19a34", "url": "https://drafts.csswg.org/css-writing-modes-4/#css-end", "dfnText": "end", "refSections": [{"refs": [{"id": "ref-for-css-end"}], "title": "3.1.1. \nResolving <inset-area>s"}, {"refs": [{"id": "ref-for-css-end\u2460"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['43667deb'] = {"dfnID": "43667deb", "url": "https://drafts.csswg.org/css-writing-modes-4/#inline-axis", "dfnText": "inline axis", "refSections": [{"refs": [{"id": "ref-for-inline-axis"}, {"id": "ref-for-inline-axis\u2460"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['8f96f376'] = {"dfnID": "8f96f376", "url": "https://drafts.csswg.org/css-writing-modes-4/#inline-axis", "dfnText": "inline-axis", "refSections": [{"refs": [{"id": "ref-for-inline-axis"}, {"id": "ref-for-inline-axis\u2460"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['f4a5f1c1'] = {"dfnID": "f4a5f1c1", "url": "https://drafts.csswg.org/css-writing-modes-4/#inline-end", "dfnText": "inline-end", "refSections": [{"refs": [{"id": "ref-for-inline-end"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['466b2ed9'] = {"dfnID": "466b2ed9", "url": "https://drafts.csswg.org/css-writing-modes-4/#inline-start", "dfnText": "inline-start", "refSections": [{"refs": [{"id": "ref-for-inline-start"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['8067deca'] = {"dfnID": "8067deca", "url": "https://drafts.csswg.org/css-writing-modes-4/#css-start", "dfnText": "start", "refSections": [{"refs": [{"id": "ref-for-css-start"}], "title": "3.1.1. \nResolving <inset-area>s"}, {"refs": [{"id": "ref-for-css-start\u2460"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": true}; window.dfnpanelData['a73617e0'] = {"dfnID": "a73617e0", "url": "https://drafts.csswg.org/css-writing-modes-4/#writing-mode", "dfnText": "writing mode", "refSections": [{"refs": [{"id": "ref-for-writing-mode"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-writing-mode\u2460"}, {"id": "ref-for-writing-mode\u2461"}], "title": "4.1. The anchor-size() Function"}], "external": true}; window.dfnpanelData['2161cf2b'] = {"dfnID": "2161cf2b", "url": "https://www.w3.org/TR/CSS21/selector.html#x22", "dfnText": "pseudo-elements", "refSections": [{"refs": [{"id": "ref-for-x22"}, {"id": "ref-for-x22\u2460"}], "title": "2.1.1. Implicit Anchor Elements"}], "external": true}; window.dfnpanelData['5fced98b'] = {"dfnID": "5fced98b", "url": "https://drafts.csswg.org/cssom-1/#cssomstring", "dfnText": "CSSOMString", "refSections": [{"refs": [{"id": "ref-for-cssomstring"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": true}; window.dfnpanelData['ebaeb088'] = {"dfnID": "ebaeb088", "url": "https://drafts.csswg.org/cssom-1/#cssrule", "dfnText": "CSSRule", "refSections": [{"refs": [{"id": "ref-for-cssrule"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": true}; window.dfnpanelData['a82a20ef'] = {"dfnID": "a82a20ef", "url": "https://drafts.csswg.org/cssom-1/#cssstyledeclaration", "dfnText": "CSSStyleDeclaration", "refSections": [{"refs": [{"id": "ref-for-cssstyledeclaration"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": true}; window.dfnpanelData['b13bfb39'] = {"dfnID": "b13bfb39", "url": "https://drafts.csswg.org/cssom-1/#dom-cssstyledeclaration-csstext", "dfnText": "cssText", "refSections": [{"refs": [{"id": "ref-for-dom-cssstyledeclaration-csstext"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": true}; window.dfnpanelData['f7960529'] = {"dfnID": "f7960529", "url": "https://dom.spec.whatwg.org/#concept-tree-root", "dfnText": "root", "refSections": [{"refs": [{"id": "ref-for-concept-tree-root"}], "title": "2.3. Finding an Anchor"}], "external": true}; window.dfnpanelData['19f9e9df'] = {"dfnID": "19f9e9df", "url": "https://dom.spec.whatwg.org/#concept-shadow-tree", "dfnText": "shadow tree", "refSections": [{"refs": [{"id": "ref-for-concept-shadow-tree"}, {"id": "ref-for-concept-shadow-tree\u2460"}, {"id": "ref-for-concept-shadow-tree\u2461"}], "title": "2.3. Finding an Anchor"}], "external": true}; window.dfnpanelData['e6cc3311'] = {"dfnID": "e6cc3311", "url": "https://dom.spec.whatwg.org/#concept-tree", "dfnText": "tree", "refSections": [{"refs": [{"id": "ref-for-concept-tree"}], "title": "2.3. Finding an Anchor"}], "external": true}; window.dfnpanelData['d7d642a2'] = {"dfnID": "d7d642a2", "url": "https://html.spec.whatwg.org/multipage/input.html#the-input-element", "dfnText": "input", "refSections": [{"refs": [{"id": "ref-for-the-input-element"}], "title": "3.2. The anchor() Function"}], "external": true}; window.dfnpanelData['7486f2c8'] = {"dfnID": "7486f2c8", "url": "https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element", "dfnText": "li", "refSections": [{"refs": [{"id": "ref-for-the-li-element"}, {"id": "ref-for-the-li-element\u2460"}], "title": "2.2. \nScoping Anchor Names: the anchor-scope property"}], "external": true}; window.dfnpanelData['f937b7b6'] = {"dfnID": "f937b7b6", "url": "https://infra.spec.whatwg.org/#iteration-continue", "dfnText": "continue", "refSections": [{"refs": [{"id": "ref-for-iteration-continue"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['16d07e10'] = {"dfnID": "16d07e10", "url": "https://infra.spec.whatwg.org/#list-iterate", "dfnText": "for each", "refSections": [{"refs": [{"id": "ref-for-list-iterate"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['72646e78'] = {"dfnID": "72646e78", "url": "https://drafts.csswg.org/resize-observer-1/#resizeobserver", "dfnText": "ResizeObserver", "refSections": [{"refs": [{"id": "ref-for-resizeobserver"}], "title": "5.5. Applying Position Fallback"}], "external": true}; window.dfnpanelData['82805a4e'] = {"dfnID": "82805a4e", "url": "https://drafts.csswg.org/selectors-4/#originating-element", "dfnText": "originating element", "refSections": [{"refs": [{"id": "ref-for-originating-element"}], "title": "2.1.1. Implicit Anchor Elements"}], "external": true}; window.dfnpanelData['9bfc28f6'] = {"dfnID": "9bfc28f6", "url": "https://drafts.csswg.org/selectors-4/#pseudo-element", "dfnText": "pseudo-element", "refSections": [{"refs": [{"id": "ref-for-pseudo-element"}], "title": "2.3. Finding an Anchor"}], "external": true}; window.dfnpanelData['889e932f'] = {"dfnID": "889e932f", "url": "https://webidl.spec.whatwg.org/#Exposed", "dfnText": "Exposed", "refSections": [{"refs": [{"id": "ref-for-Exposed"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": true}; window.dfnpanelData['21ecf38f'] = {"dfnID": "21ecf38f", "url": "https://webidl.spec.whatwg.org/#PutForwards", "dfnText": "PutForwards", "refSections": [{"refs": [{"id": "ref-for-PutForwards"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": true}; window.dfnpanelData['a5c91173'] = {"dfnID": "a5c91173", "url": "https://webidl.spec.whatwg.org/#SameObject", "dfnText": "SameObject", "refSections": [{"refs": [{"id": "ref-for-SameObject"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": true}; window.dfnpanelData['anchor-functions'] = {"dfnID": "anchor-functions", "url": "#anchor-functions", "dfnText": "anchor functions", "refSections": [{"refs": [{"id": "ref-for-anchor-functions"}, {"id": "ref-for-anchor-functions\u2460"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-anchor-functions\u2461"}, {"id": "ref-for-anchor-functions\u2462"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}], "external": false}; window.dfnpanelData['propdef-anchor-name'] = {"dfnID": "propdef-anchor-name", "url": "#propdef-anchor-name", "dfnText": "anchor-name", "refSections": [{"refs": [{"id": "ref-for-propdef-anchor-name"}, {"id": "ref-for-propdef-anchor-name\u2460"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-propdef-anchor-name\u2461"}], "title": "2.1.1. Implicit Anchor Elements"}, {"refs": [{"id": "ref-for-propdef-anchor-name\u2462"}, {"id": "ref-for-propdef-anchor-name\u2463"}, {"id": "ref-for-propdef-anchor-name\u2464"}], "title": "2.3. Finding an Anchor"}], "external": false}; window.dfnpanelData['anchor-element'] = {"dfnID": "anchor-element", "url": "#anchor-element", "dfnText": "anchor element", "refSections": [{"refs": [{"id": "ref-for-anchor-element"}, {"id": "ref-for-anchor-element\u2460"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-anchor-element\u2461"}, {"id": "ref-for-anchor-element\u2462"}], "title": "2.2. \nScoping Anchor Names: the anchor-scope property"}, {"refs": [{"id": "ref-for-anchor-element\u2463"}, {"id": "ref-for-anchor-element\u2464"}, {"id": "ref-for-anchor-element\u2465"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-anchor-element\u2466"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-anchor-element\u2467"}, {"id": "ref-for-anchor-element\u2468"}], "title": "2.5. \nAnchor Relevance"}, {"refs": [{"id": "ref-for-anchor-element\u2460\u24ea"}, {"id": "ref-for-anchor-element\u2460\u2460"}], "title": "3. Anchor-Based Positioning"}, {"refs": [{"id": "ref-for-anchor-element\u2460\u2461"}, {"id": "ref-for-anchor-element\u2460\u2462"}, {"id": "ref-for-anchor-element\u2460\u2463"}, {"id": "ref-for-anchor-element\u2460\u2464"}, {"id": "ref-for-anchor-element\u2460\u2465"}, {"id": "ref-for-anchor-element\u2460\u2466"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-anchor-element\u2460\u2467"}], "title": "4. Anchor-Based Sizing"}, {"refs": [{"id": "ref-for-anchor-element\u2460\u2468"}], "title": "5. Overflow Management"}], "external": false}; window.dfnpanelData['anchor-name'] = {"dfnID": "anchor-name", "url": "#anchor-name", "dfnText": "anchor names", "refSections": [{"refs": [{"id": "ref-for-anchor-name"}, {"id": "ref-for-anchor-name\u2460"}, {"id": "ref-for-anchor-name\u2461"}, {"id": "ref-for-anchor-name\u2462"}, {"id": "ref-for-anchor-name\u2463"}, {"id": "ref-for-anchor-name\u2464"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-anchor-name\u2465"}, {"id": "ref-for-anchor-name\u2466"}, {"id": "ref-for-anchor-name\u2467"}, {"id": "ref-for-anchor-name\u2468"}, {"id": "ref-for-anchor-name\u2460\u24ea"}, {"id": "ref-for-anchor-name\u2460\u2460"}, {"id": "ref-for-anchor-name\u2460\u2461"}], "title": "2.2. \nScoping Anchor Names: the anchor-scope property"}, {"refs": [{"id": "ref-for-anchor-name\u2460\u2462"}, {"id": "ref-for-anchor-name\u2460\u2463"}, {"id": "ref-for-anchor-name\u2460\u2464"}, {"id": "ref-for-anchor-name\u2460\u2465"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-anchor-name\u2460\u2466"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['implicit-anchor-element'] = {"dfnID": "implicit-anchor-element", "url": "#implicit-anchor-element", "dfnText": "implicit anchor element", "refSections": [{"refs": [{"id": "ref-for-implicit-anchor-element"}, {"id": "ref-for-implicit-anchor-element\u2460"}, {"id": "ref-for-implicit-anchor-element\u2461"}, {"id": "ref-for-implicit-anchor-element\u2462"}], "title": "2.1.1. Implicit Anchor Elements"}, {"refs": [{"id": "ref-for-implicit-anchor-element\u2463"}], "title": "2.2. \nScoping Anchor Names: the anchor-scope property"}, {"refs": [{"id": "ref-for-implicit-anchor-element\u2464"}, {"id": "ref-for-implicit-anchor-element\u2465"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-implicit-anchor-element\u2466"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['propdef-anchor-scope'] = {"dfnID": "propdef-anchor-scope", "url": "#propdef-anchor-scope", "dfnText": "anchor-scope", "refSections": [{"refs": [{"id": "ref-for-propdef-anchor-scope"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-propdef-anchor-scope\u2460"}, {"id": "ref-for-propdef-anchor-scope\u2461"}, {"id": "ref-for-propdef-anchor-scope\u2462"}, {"id": "ref-for-propdef-anchor-scope\u2463"}, {"id": "ref-for-propdef-anchor-scope\u2464"}], "title": "2.2. \nScoping Anchor Names: the anchor-scope property"}, {"refs": [{"id": "ref-for-propdef-anchor-scope\u2465"}], "title": "2.3. Finding an Anchor"}], "external": false}; window.dfnpanelData['anchor-specifier'] = {"dfnID": "anchor-specifier", "url": "#anchor-specifier", "dfnText": "anchor specifier", "refSections": [{"refs": [{"id": "ref-for-anchor-specifier"}], "title": "2.3. Finding an Anchor"}], "external": false}; window.dfnpanelData['target-anchor-element'] = {"dfnID": "target-anchor-element", "url": "#target-anchor-element", "dfnText": "target anchor element", "refSections": [{"refs": [{"id": "ref-for-target-anchor-element"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-target-anchor-element\u2460"}, {"id": "ref-for-target-anchor-element\u2461"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-target-anchor-element\u2462"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-target-anchor-element\u2463"}], "title": "2.5. \nAnchor Relevance"}, {"refs": [{"id": "ref-for-target-anchor-element\u2464"}, {"id": "ref-for-target-anchor-element\u2465"}, {"id": "ref-for-target-anchor-element\u2466"}, {"id": "ref-for-target-anchor-element\u2467"}, {"id": "ref-for-target-anchor-element\u2468"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-target-anchor-element\u2460\u24ea"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-target-anchor-element\u2460\u2460"}], "title": "3.5. Validity"}, {"refs": [{"id": "ref-for-target-anchor-element\u2460\u2461"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-target-anchor-element\u2460\u2462"}, {"id": "ref-for-target-anchor-element\u2460\u2463"}], "title": "4.1. The anchor-size() Function"}, {"refs": [{"id": "ref-for-target-anchor-element\u2460\u2464"}], "title": "4.2. Validity"}], "external": false}; window.dfnpanelData['acceptable-anchor-element'] = {"dfnID": "acceptable-anchor-element", "url": "#acceptable-anchor-element", "dfnText": "acceptable anchor element", "refSections": [{"refs": [{"id": "ref-for-acceptable-anchor-element"}], "title": "2.1. Creating an Anchor: the anchor-name property"}, {"refs": [{"id": "ref-for-acceptable-anchor-element\u2460"}, {"id": "ref-for-acceptable-anchor-element\u2461"}], "title": "2.3. Finding an Anchor"}], "external": false}; window.dfnpanelData['propdef-position-anchor'] = {"dfnID": "propdef-position-anchor", "url": "#propdef-position-anchor", "dfnText": "position-anchor", "refSections": [{"refs": [{"id": "ref-for-propdef-position-anchor"}, {"id": "ref-for-propdef-position-anchor\u2460"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-propdef-position-anchor\u2461"}, {"id": "ref-for-propdef-position-anchor\u2462"}], "title": "5.4. The @position-try Rule"}], "external": false}; window.dfnpanelData['default-anchor-specifier'] = {"dfnID": "default-anchor-specifier", "url": "#default-anchor-specifier", "dfnText": "default anchor specifier", "refSections": [{"refs": [{"id": "ref-for-default-anchor-specifier"}], "title": "2.3. Finding an Anchor"}, {"refs": [{"id": "ref-for-default-anchor-specifier\u2460"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-default-anchor-specifier\u2461"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['default-anchor-element'] = {"dfnID": "default-anchor-element", "url": "#default-anchor-element", "dfnText": "default anchor element", "refSections": [{"refs": [{"id": "ref-for-default-anchor-element"}], "title": "3. Anchor-Based Positioning"}, {"refs": [{"id": "ref-for-default-anchor-element\u2460"}, {"id": "ref-for-default-anchor-element\u2461"}, {"id": "ref-for-default-anchor-element\u2462"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-default-anchor-element\u2463"}, {"id": "ref-for-default-anchor-element\u2464"}, {"id": "ref-for-default-anchor-element\u2465"}, {"id": "ref-for-default-anchor-element\u2466"}, {"id": "ref-for-default-anchor-element\u2467"}], "title": "3.1.1. \nResolving <inset-area>s"}, {"refs": [{"id": "ref-for-default-anchor-element\u2468"}, {"id": "ref-for-default-anchor-element\u2460\u24ea"}, {"id": "ref-for-default-anchor-element\u2460\u2460"}, {"id": "ref-for-default-anchor-element\u2460\u2461"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-default-anchor-element\u2460\u2462"}, {"id": "ref-for-default-anchor-element\u2460\u2463"}, {"id": "ref-for-default-anchor-element\u2460\u2464"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-default-anchor-element\u2460\u2465"}, {"id": "ref-for-default-anchor-element\u2460\u2466"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": false}; window.dfnpanelData['propdef-inset-area'] = {"dfnID": "propdef-inset-area", "url": "#propdef-inset-area", "dfnText": "inset-area", "refSections": [{"refs": [{"id": "ref-for-propdef-inset-area"}], "title": "3. Anchor-Based Positioning"}, {"refs": [{"id": "ref-for-propdef-inset-area\u2460"}, {"id": "ref-for-propdef-inset-area\u2461"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-propdef-inset-area\u2462"}], "title": "3.1.1. \nResolving <inset-area>s"}, {"refs": [{"id": "ref-for-propdef-inset-area\u2463"}, {"id": "ref-for-propdef-inset-area\u2464"}, {"id": "ref-for-propdef-inset-area\u2465"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-propdef-inset-area\u2466"}], "title": "5.4. The @position-try Rule"}], "external": false}; window.dfnpanelData['typedef-inset-area'] = {"dfnID": "typedef-inset-area", "url": "#typedef-inset-area", "dfnText": "<inset-area>", "refSections": [{"refs": [{"id": "ref-for-typedef-inset-area"}, {"id": "ref-for-typedef-inset-area\u2460"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-typedef-inset-area\u2461"}, {"id": "ref-for-typedef-inset-area\u2462"}, {"id": "ref-for-typedef-inset-area\u2463"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['inset-area-grid'] = {"dfnID": "inset-area-grid", "url": "#inset-area-grid", "dfnText": "inset-area grid", "refSections": [{"refs": [{"id": "ref-for-inset-area-grid"}, {"id": "ref-for-inset-area-grid\u2460"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-inset-area-grid\u2461"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['valdef-inset-area-start'] = {"dfnID": "valdef-inset-area-start", "url": "#valdef-inset-area-start", "dfnText": "start", "refSections": [{"refs": [{"id": "ref-for-valdef-inset-area-start"}, {"id": "ref-for-valdef-inset-area-start\u2460"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['valdef-inset-area-end'] = {"dfnID": "valdef-inset-area-end", "url": "#valdef-inset-area-end", "dfnText": "end", "refSections": [{"refs": [{"id": "ref-for-valdef-inset-area-end"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['valdef-inset-area-self-start'] = {"dfnID": "valdef-inset-area-self-start", "url": "#valdef-inset-area-self-start", "dfnText": "self-start", "refSections": [{"refs": [{"id": "ref-for-valdef-inset-area-self-start"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['valdef-inset-area-top'] = {"dfnID": "valdef-inset-area-top", "url": "#valdef-inset-area-top", "dfnText": "top", "refSections": [{"refs": [{"id": "ref-for-valdef-inset-area-top"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['valdef-inset-area-x-start'] = {"dfnID": "valdef-inset-area-x-start", "url": "#valdef-inset-area-x-start", "dfnText": "x-start", "refSections": [{"refs": [{"id": "ref-for-valdef-inset-area-x-start"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['valdef-inset-area-x-self-end'] = {"dfnID": "valdef-inset-area-x-self-end", "url": "#valdef-inset-area-x-self-end", "dfnText": "x-self-end", "refSections": [{"refs": [{"id": "ref-for-valdef-inset-area-x-self-end"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['valdef-inset-area-center'] = {"dfnID": "valdef-inset-area-center", "url": "#valdef-inset-area-center", "dfnText": "center", "refSections": [{"refs": [{"id": "ref-for-valdef-inset-area-center"}, {"id": "ref-for-valdef-inset-area-center\u2460"}, {"id": "ref-for-valdef-inset-area-center\u2461"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['valdef-inset-area-span-top'] = {"dfnID": "valdef-inset-area-span-top", "url": "#valdef-inset-area-span-top", "dfnText": "span-top", "refSections": [{"refs": [{"id": "ref-for-valdef-inset-area-span-top"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['valdef-inset-area-span-all'] = {"dfnID": "valdef-inset-area-span-all", "url": "#valdef-inset-area-span-all", "dfnText": "span-all", "refSections": [{"refs": [{"id": "ref-for-valdef-inset-area-span-all"}, {"id": "ref-for-valdef-inset-area-span-all\u2460"}], "title": "3.1.1. \nResolving <inset-area>s"}], "external": false}; window.dfnpanelData['funcdef-anchor'] = {"dfnID": "funcdef-anchor", "url": "#funcdef-anchor", "dfnText": "anchor()", "refSections": [{"refs": [{"id": "ref-for-funcdef-anchor"}], "title": "1. Introduction"}, {"refs": [{"id": "ref-for-funcdef-anchor\u2460"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-funcdef-anchor\u2461"}], "title": "3. Anchor-Based Positioning"}, {"refs": [{"id": "ref-for-funcdef-anchor\u2462"}], "title": "3.1.1. \nResolving <inset-area>s"}, {"refs": [{"id": "ref-for-funcdef-anchor\u2463"}, {"id": "ref-for-funcdef-anchor\u2464"}, {"id": "ref-for-funcdef-anchor\u2465"}, {"id": "ref-for-funcdef-anchor\u2466"}, {"id": "ref-for-funcdef-anchor\u2467"}, {"id": "ref-for-funcdef-anchor\u2468"}, {"id": "ref-for-funcdef-anchor\u2460\u24ea"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-funcdef-anchor\u2460\u2460"}, {"id": "ref-for-funcdef-anchor\u2460\u2461"}, {"id": "ref-for-funcdef-anchor\u2460\u2462"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-funcdef-anchor\u2460\u2463"}, {"id": "ref-for-funcdef-anchor\u2460\u2464"}], "title": "3.5. Validity"}, {"refs": [{"id": "ref-for-funcdef-anchor\u2460\u2465"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-funcdef-anchor\u2460\u2466"}, {"id": "ref-for-funcdef-anchor\u2460\u2467"}], "title": "4.1. The anchor-size() Function"}, {"refs": [{"id": "ref-for-funcdef-anchor\u2460\u2468"}], "title": "5.4. The @position-try Rule"}], "external": false}; window.dfnpanelData['typedef-anchor-element'] = {"dfnID": "typedef-anchor-element", "url": "#typedef-anchor-element", "dfnText": "<anchor-element>", "refSections": [{"refs": [{"id": "ref-for-typedef-anchor-element"}, {"id": "ref-for-typedef-anchor-element\u2460"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-typedef-anchor-element\u2461"}, {"id": "ref-for-typedef-anchor-element\u2462"}, {"id": "ref-for-typedef-anchor-element\u2463"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-typedef-anchor-element\u2464"}], "title": "3.5. Validity"}, {"refs": [{"id": "ref-for-typedef-anchor-element\u2465"}], "title": "4.1. The anchor-size() Function"}, {"refs": [{"id": "ref-for-typedef-anchor-element\u2466"}], "title": "4.2. Validity"}, {"refs": [{"id": "ref-for-typedef-anchor-element\u2467"}], "title": "5.4. The @position-try Rule"}], "external": false}; window.dfnpanelData['typedef-anchor-side'] = {"dfnID": "typedef-anchor-side", "url": "#typedef-anchor-side", "dfnText": "<anchor-side>", "refSections": [{"refs": [{"id": "ref-for-typedef-anchor-side"}, {"id": "ref-for-typedef-anchor-side\u2460"}, {"id": "ref-for-typedef-anchor-side\u2461"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-typedef-anchor-side\u2462"}], "title": "3.5. Validity"}, {"refs": [{"id": "ref-for-typedef-anchor-side\u2463"}], "title": "4.1. The anchor-size() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-implicit'] = {"dfnID": "valdef-anchor-implicit", "url": "#valdef-anchor-implicit", "dfnText": "implicit", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-implicit"}], "title": "2.1.1. Implicit Anchor Elements"}, {"refs": [{"id": "ref-for-valdef-anchor-implicit\u2460"}, {"id": "ref-for-valdef-anchor-implicit\u2461"}], "title": "2.3. Finding an Anchor"}], "external": false}; window.dfnpanelData['valdef-anchor-inside'] = {"dfnID": "valdef-anchor-inside", "url": "#valdef-anchor-inside", "dfnText": "inside", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-inside"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-outside'] = {"dfnID": "valdef-anchor-outside", "url": "#valdef-anchor-outside", "dfnText": "outside", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-outside"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-left'] = {"dfnID": "valdef-anchor-left", "url": "#valdef-anchor-left", "dfnText": "left", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-left"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-valdef-anchor-left\u2460"}], "title": "3.5. Validity"}], "external": false}; window.dfnpanelData['valdef-anchor-start'] = {"dfnID": "valdef-anchor-start", "url": "#valdef-anchor-start", "dfnText": "start", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-start"}, {"id": "ref-for-valdef-anchor-start\u2460"}, {"id": "ref-for-valdef-anchor-start\u2461"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-end'] = {"dfnID": "valdef-anchor-end", "url": "#valdef-anchor-end", "dfnText": "end", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-end"}, {"id": "ref-for-valdef-anchor-end\u2460"}, {"id": "ref-for-valdef-anchor-end\u2461"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-self-start'] = {"dfnID": "valdef-anchor-self-start", "url": "#valdef-anchor-self-start", "dfnText": "self-start", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-self-start"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-self-end'] = {"dfnID": "valdef-anchor-self-end", "url": "#valdef-anchor-self-end", "dfnText": "self-end", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-self-end"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-center'] = {"dfnID": "valdef-anchor-center", "url": "#valdef-anchor-center", "dfnText": "center", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-center"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['valdef-justify-self-anchor-center'] = {"dfnID": "valdef-justify-self-anchor-center", "url": "#valdef-justify-self-anchor-center", "dfnText": "anchor-center", "refSections": [{"refs": [{"id": "ref-for-valdef-justify-self-anchor-center"}], "title": "3.1. The inset-area Property"}, {"refs": [{"id": "ref-for-valdef-justify-self-anchor-center\u2460"}], "title": "3.1.1. \nResolving <inset-area>s"}, {"refs": [{"id": "ref-for-valdef-justify-self-anchor-center\u2461"}], "title": "3.3. Centering on the Anchor: the anchor-center value"}, {"refs": [{"id": "ref-for-valdef-justify-self-anchor-center\u2462"}], "title": "3.4. Taking Scroll Into Account"}], "external": false}; window.dfnpanelData['needs-scroll-adjustment'] = {"dfnID": "needs-scroll-adjustment", "url": "#needs-scroll-adjustment", "dfnText": "needs scroll adjustment", "refSections": [{"refs": [{"id": "ref-for-needs-scroll-adjustment"}, {"id": "ref-for-needs-scroll-adjustment\u2460"}], "title": "3.4. Taking Scroll Into Account"}], "external": false}; window.dfnpanelData['snapshotted-scroll-offset'] = {"dfnID": "snapshotted-scroll-offset", "url": "#snapshotted-scroll-offset", "dfnText": "snapshotted scroll offset", "refSections": [{"refs": [{"id": "ref-for-snapshotted-scroll-offset"}], "title": "3.2. The anchor() Function"}, {"refs": [{"id": "ref-for-snapshotted-scroll-offset\u2460"}], "title": "5.5. Applying Position Fallback"}], "external": false}; window.dfnpanelData['valid-anchor-function'] = {"dfnID": "valid-anchor-function", "url": "#valid-anchor-function", "dfnText": "valid anchor function", "refSections": [{"refs": [{"id": "ref-for-valid-anchor-function"}, {"id": "ref-for-valid-anchor-function\u2460"}], "title": "3.2. The anchor() Function"}], "external": false}; window.dfnpanelData['propdef-position-visibility'] = {"dfnID": "propdef-position-visibility", "url": "#propdef-position-visibility", "dfnText": "position-visibility", "refSections": [{"refs": [{"id": "ref-for-propdef-position-visibility"}, {"id": "ref-for-propdef-position-visibility\u2460"}, {"id": "ref-for-propdef-position-visibility\u2461"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": false}; window.dfnpanelData['required-anchor-reference'] = {"dfnID": "required-anchor-reference", "url": "#required-anchor-reference", "dfnText": "required anchor reference", "refSections": [{"refs": [{"id": "ref-for-required-anchor-reference"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": false}; window.dfnpanelData['clipped-by-intervening-elements'] = {"dfnID": "clipped-by-intervening-elements", "url": "#clipped-by-intervening-elements", "dfnText": "clipped by intervening elements", "refSections": [{"refs": [{"id": "ref-for-clipped-by-intervening-elements"}, {"id": "ref-for-clipped-by-intervening-elements\u2460"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": false}; window.dfnpanelData['strongly-hidden'] = {"dfnID": "strongly-hidden", "url": "#strongly-hidden", "dfnText": "strongly hidden", "refSections": [{"refs": [{"id": "ref-for-strongly-hidden"}, {"id": "ref-for-strongly-hidden\u2460"}, {"id": "ref-for-strongly-hidden\u2461"}, {"id": "ref-for-strongly-hidden\u2462"}], "title": "3.6. Conditional Hiding: the position-visibility property"}], "external": false}; window.dfnpanelData['funcdef-anchor-size'] = {"dfnID": "funcdef-anchor-size", "url": "#funcdef-anchor-size", "dfnText": "anchor-size()", "refSections": [{"refs": [{"id": "ref-for-funcdef-anchor-size"}], "title": "1. Introduction"}, {"refs": [{"id": "ref-for-funcdef-anchor-size\u2460"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-funcdef-anchor-size\u2461"}], "title": "4. Anchor-Based Sizing"}, {"refs": [{"id": "ref-for-funcdef-anchor-size\u2462"}, {"id": "ref-for-funcdef-anchor-size\u2463"}, {"id": "ref-for-funcdef-anchor-size\u2464"}], "title": "4.1. The anchor-size() Function"}, {"refs": [{"id": "ref-for-funcdef-anchor-size\u2465"}, {"id": "ref-for-funcdef-anchor-size\u2466"}], "title": "4.2. Validity"}], "external": false}; window.dfnpanelData['typedef-anchor-size'] = {"dfnID": "typedef-anchor-size", "url": "#typedef-anchor-size", "dfnText": "<anchor-size>", "refSections": [{"refs": [{"id": "ref-for-typedef-anchor-size"}, {"id": "ref-for-typedef-anchor-size\u2460"}, {"id": "ref-for-typedef-anchor-size\u2461"}, {"id": "ref-for-typedef-anchor-size\u2462"}, {"id": "ref-for-typedef-anchor-size\u2463"}], "title": "4.1. The anchor-size() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-size-block'] = {"dfnID": "valdef-anchor-size-block", "url": "#valdef-anchor-size-block", "dfnText": "block", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-size-block"}], "title": "4.1. The anchor-size() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-size-inline'] = {"dfnID": "valdef-anchor-size-inline", "url": "#valdef-anchor-size-inline", "dfnText": "inline", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-size-inline"}], "title": "4.1. The anchor-size() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-size-self-block'] = {"dfnID": "valdef-anchor-size-self-block", "url": "#valdef-anchor-size-self-block", "dfnText": "self-block", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-size-self-block"}], "title": "4.1. The anchor-size() Function"}], "external": false}; window.dfnpanelData['valdef-anchor-size-self-inline'] = {"dfnID": "valdef-anchor-size-self-inline", "url": "#valdef-anchor-size-self-inline", "dfnText": "self-inline", "refSections": [{"refs": [{"id": "ref-for-valdef-anchor-size-self-inline"}], "title": "4.1. The anchor-size() Function"}], "external": false}; window.dfnpanelData['valid-anchor-size-function'] = {"dfnID": "valid-anchor-size-function", "url": "#valid-anchor-size-function", "dfnText": "valid anchor-size function", "refSections": [{"refs": [{"id": "ref-for-valid-anchor-size-function"}], "title": "4.1. The anchor-size() Function"}], "external": false}; window.dfnpanelData['propdef-position-try-options'] = {"dfnID": "propdef-position-try-options", "url": "#propdef-position-try-options", "dfnText": "position-try-options", "refSections": [{"refs": [{"id": "ref-for-propdef-position-try-options"}], "title": "5. Overflow Management"}, {"refs": [{"id": "ref-for-propdef-position-try-options\u2460"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-propdef-position-try-options\u2461"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-propdef-position-try-options\u2462"}, {"id": "ref-for-propdef-position-try-options\u2463"}], "title": "5.3. The position-try Shorthand"}, {"refs": [{"id": "ref-for-propdef-position-try-options\u2464"}, {"id": "ref-for-propdef-position-try-options\u2465"}], "title": "5.4. The @position-try Rule"}, {"refs": [{"id": "ref-for-propdef-position-try-options\u2466"}, {"id": "ref-for-propdef-position-try-options\u2467"}], "title": "5.5. Applying Position Fallback"}], "external": false}; window.dfnpanelData['position-options-list'] = {"dfnID": "position-options-list", "url": "#position-options-list", "dfnText": "position options list", "refSections": [{"refs": [{"id": "ref-for-position-options-list"}], "title": "2.4. \nDefault Anchors: the position-anchor property"}, {"refs": [{"id": "ref-for-position-options-list\u2460"}], "title": "3.4. Taking Scroll Into Account"}, {"refs": [{"id": "ref-for-position-options-list\u2461"}, {"id": "ref-for-position-options-list\u2462"}, {"id": "ref-for-position-options-list\u2463"}, {"id": "ref-for-position-options-list\u2464"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-position-options-list\u2465"}, {"id": "ref-for-position-options-list\u2466"}, {"id": "ref-for-position-options-list\u2467"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-position-options-list\u2468"}, {"id": "ref-for-position-options-list\u2460\u24ea"}, {"id": "ref-for-position-options-list\u2460\u2460"}], "title": "5.5. Applying Position Fallback"}], "external": false}; window.dfnpanelData['typedef-position-try-options-try-tactic'] = {"dfnID": "typedef-position-try-options-try-tactic", "url": "#typedef-position-try-options-try-tactic", "dfnText": "<try-tactic>", "refSections": [{"refs": [{"id": "ref-for-typedef-position-try-options-try-tactic"}, {"id": "ref-for-typedef-position-try-options-try-tactic\u2460"}, {"id": "ref-for-typedef-position-try-options-try-tactic\u2461"}, {"id": "ref-for-typedef-position-try-options-try-tactic\u2462"}, {"id": "ref-for-typedef-position-try-options-try-tactic\u2463"}, {"id": "ref-for-typedef-position-try-options-try-tactic\u2464"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}], "external": false}; window.dfnpanelData['valdef-position-try-options-flip-block'] = {"dfnID": "valdef-position-try-options-flip-block", "url": "#valdef-position-try-options-flip-block", "dfnText": "flip-block", "refSections": [{"refs": [{"id": "ref-for-valdef-position-try-options-flip-block"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}], "external": false}; window.dfnpanelData['propdef-position-try-order'] = {"dfnID": "propdef-position-try-order", "url": "#propdef-position-try-order", "dfnText": "position-try-order", "refSections": [{"refs": [{"id": "ref-for-propdef-position-try-order"}], "title": "5. Overflow Management"}, {"refs": [{"id": "ref-for-propdef-position-try-order\u2460"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-propdef-position-try-order\u2461"}, {"id": "ref-for-propdef-position-try-order\u2462"}, {"id": "ref-for-propdef-position-try-order\u2463"}], "title": "5.3. The position-try Shorthand"}], "external": false}; window.dfnpanelData['typedef-try-size'] = {"dfnID": "typedef-try-size", "url": "#typedef-try-size", "dfnText": "<try-size>", "refSections": [{"refs": [{"id": "ref-for-typedef-try-size"}, {"id": "ref-for-typedef-try-size\u2460"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}], "external": false}; window.dfnpanelData['propdef-position-try'] = {"dfnID": "propdef-position-try", "url": "#propdef-position-try", "dfnText": "position-try", "refSections": [{"refs": [{"id": "ref-for-propdef-position-try"}], "title": "3.6. Conditional Hiding: the position-visibility property"}, {"refs": [{"id": "ref-for-propdef-position-try\u2460"}], "title": "5.3. The position-try Shorthand"}, {"refs": [{"id": "ref-for-propdef-position-try\u2461"}], "title": "7. \nAppendix: Style & Layout Interleaving"}], "external": false}; window.dfnpanelData['at-ruledef-position-try'] = {"dfnID": "at-ruledef-position-try", "url": "#at-ruledef-position-try", "dfnText": "@position-try", "refSections": [{"refs": [{"id": "ref-for-at-ruledef-position-try"}], "title": "5. Overflow Management"}, {"refs": [{"id": "ref-for-at-ruledef-position-try\u2460"}, {"id": "ref-for-at-ruledef-position-try\u2461"}, {"id": "ref-for-at-ruledef-position-try\u2462"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-at-ruledef-position-try\u2463"}, {"id": "ref-for-at-ruledef-position-try\u2464"}, {"id": "ref-for-at-ruledef-position-try\u2465"}, {"id": "ref-for-at-ruledef-position-try\u2466"}, {"id": "ref-for-at-ruledef-position-try\u2467"}, {"id": "ref-for-at-ruledef-position-try\u2468"}], "title": "5.4. The @position-try Rule"}, {"refs": [{"id": "ref-for-at-ruledef-position-try\u2460\u24ea"}], "title": "5.5. Applying Position Fallback"}, {"refs": [{"id": "ref-for-at-ruledef-position-try\u2460\u2460"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": false}; window.dfnpanelData['position-option'] = {"dfnID": "position-option", "url": "#position-option", "dfnText": "position option", "refSections": [{"refs": [{"id": "ref-for-position-option"}, {"id": "ref-for-position-option\u2460"}, {"id": "ref-for-position-option\u2461"}, {"id": "ref-for-position-option\u2462"}, {"id": "ref-for-position-option\u2463"}], "title": "5.1. Giving Fallback Options: the position-try-options property"}, {"refs": [{"id": "ref-for-position-option\u2464"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-position-option\u2465"}, {"id": "ref-for-position-option\u2466"}], "title": "5.5. Applying Position Fallback"}], "external": false}; window.dfnpanelData['accepted-position-try-properties'] = {"dfnID": "accepted-position-try-properties", "url": "#accepted-position-try-properties", "dfnText": "accepts", "refSections": [{"refs": [{"id": "ref-for-accepted-position-try-properties"}], "title": "6.1. The CSSPositionTryRule interface"}, {"refs": [{"id": "ref-for-accepted-position-try-properties\u2460"}], "title": "7. \nAppendix: Style & Layout Interleaving"}], "external": false}; window.dfnpanelData['position-fallback-origin'] = {"dfnID": "position-fallback-origin", "url": "#position-fallback-origin", "dfnText": "Position Fallback Origin", "refSections": [{"refs": [{"id": "ref-for-position-fallback-origin"}, {"id": "ref-for-position-fallback-origin\u2460"}], "title": "5.5. Applying Position Fallback"}], "external": false}; window.dfnpanelData['apply-a-position-option'] = {"dfnID": "apply-a-position-option", "url": "#apply-a-position-option", "dfnText": "apply a position option", "refSections": [{"refs": [{"id": "ref-for-apply-a-position-option"}], "title": "5.2. Determining Fallback Order: the position-try-order property"}, {"refs": [{"id": "ref-for-apply-a-position-option\u2460"}, {"id": "ref-for-apply-a-position-option\u2461"}], "title": "5.5. Applying Position Fallback"}], "external": false}; window.dfnpanelData['determine-the-position-fallback-styles'] = {"dfnID": "determine-the-position-fallback-styles", "url": "#determine-the-position-fallback-styles", "dfnText": "determine the position fallback styles", "refSections": [{"refs": [{"id": "ref-for-determine-the-position-fallback-styles"}], "title": "5.5. Applying Position Fallback"}], "external": false}; window.dfnpanelData['last-successful-position-option'] = {"dfnID": "last-successful-position-option", "url": "#last-successful-position-option", "dfnText": "last successful position option", "refSections": [{"refs": [{"id": "ref-for-last-successful-position-option"}, {"id": "ref-for-last-successful-position-option\u2460"}, {"id": "ref-for-last-successful-position-option\u2461"}], "title": "5.5. Applying Position Fallback"}], "external": false}; window.dfnpanelData['csspositiontryrule'] = {"dfnID": "csspositiontryrule", "url": "#csspositiontryrule", "dfnText": "CSSPositionTryRule", "refSections": [{"refs": [{"id": "ref-for-csspositiontryrule"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": false}; window.dfnpanelData['dom-csspositiontryrule-name'] = {"dfnID": "dom-csspositiontryrule-name", "url": "#dom-csspositiontryrule-name", "dfnText": "name", "refSections": [{"refs": [{"id": "ref-for-dom-csspositiontryrule-name"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": false}; window.dfnpanelData['dom-csspositiontryrule-style'] = {"dfnID": "dom-csspositiontryrule-style", "url": "#dom-csspositiontryrule-style", "dfnText": "style", "refSections": [{"refs": [{"id": "ref-for-dom-csspositiontryrule-style"}], "title": "6.1. The CSSPositionTryRule interface"}], "external": false}; window.dfnpanelData['style--layout-interleave'] = {"dfnID": "style--layout-interleave", "url": "#style--layout-interleave", "dfnText": "Style & layout interleaving", "refSections": [{"refs": [{"id": "ref-for-style--layout-interleave"}], "title": "5.5. Applying Position Fallback"}, {"refs": [{"id": "ref-for-style--layout-interleave\u2460"}, {"id": "ref-for-style--layout-interleave\u2461"}], "title": "7. \nAppendix: Style & Layout Interleaving"}], "external": false}; </script> <script>/* Boilerplate: script-dom-helper */ function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } } </script> <script>/* Boilerplate: script-var-click-highlighting */ /* Color-choosing design: Colors are ordered by goodness. Each color has a usage count (initially zero). Each variable has a last-used color. * If the var has a last-used color, and that color's usage is 0, return that color. * Otherwise, return the lowest-indexed color with the lowest usage. Increment the color's usage and set it as the last-used color for that var. * On unclicking, decrement usage of the color. */ "use strict"; { document.addEventListener("click", e=>{ if(e.target.nodeName == "VAR") { highlightSameAlgoVars(e.target); } }); const indexCounts = new Map(); const indexNames = new Map(); function highlightSameAlgoVars(v) { // Find the algorithm container. let algoContainer = null; let searchEl = v; while(algoContainer == null && searchEl != document.body) { searchEl = searchEl.parentNode; if(searchEl.hasAttribute("data-algorithm")) { algoContainer = searchEl; } } // Not highlighting document-global vars, // too likely to be unrelated. if(algoContainer == null) return; const algoName = algoContainer.getAttribute("data-algorithm"); const varName = getVarName(v); const addClass = !v.classList.contains("selected"); let highlightClass = null; if(addClass) { const index = chooseHighlightIndex(algoName, varName); indexCounts.get(algoName)[index] += 1; indexNames.set(algoName+"///"+varName, index); highlightClass = nameFromIndex(index); } else { const index = previousHighlightIndex(algoName, varName); indexCounts.get(algoName)[index] -= 1; highlightClass = nameFromIndex(index); } // Find all same-name vars, and toggle their class appropriately. for(const el of algoContainer.querySelectorAll("var")) { if(getVarName(el) == varName) { el.classList.toggle("selected", addClass); el.classList.toggle(highlightClass, addClass); } } } function getVarName(el) { return el.textContent.replace(/(\s|\xa0)+/, " ").trim(); } function chooseHighlightIndex(algoName, varName) { let indexes = null; if(indexCounts.has(algoName)) { indexes = indexCounts.get(algoName); } else { // 7 classes right now indexes = [0,0,0,0,0,0,0]; indexCounts.set(algoName, indexes); } // If the element was recently unclicked, // *and* that color is still unclaimed, // give it back the same color. const lastIndex = previousHighlightIndex(algoName, varName); if(indexes[lastIndex] === 0) return lastIndex; // Find the earliest index with the lowest count. const minCount = Math.min.apply(null, indexes); let index = null; for(var i = 0; i < indexes.length; i++) { if(indexes[i] == minCount) { return i; } } } function previousHighlightIndex(algoName, varName) { return indexNames.get(algoName+"///"+varName); } function nameFromIndex(index) { return "selected" + index; } } </script><a class='success' href='/date/2024-04-08T15:02:10/bikeshed/css-anchor-position-1/' id='generator' title='Bikeshed Succeeded'><svg height='24' viewbox='0 0 100 100' width='24'><g stroke="blue" stroke-width="6" fill="none"><path fill="blue" stroke="none" d="M 5 95 L 5 35 L 50 10 L 50 95"/><path d="M 1 37 L 54 8"/><path fill="blue" stroke="none" d="M 1 40 v -6 l 60 -32 v 6 z" /><circle cx="75" cy="79" r="15" /><circle fill="blue" stroke="none" cx="75" cy="79" r="4" /><path d="M 75 79 L 65 49 L 55 49" /><path d="M 67 55 L 48 69" /></g></svg></a>