You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: files/en-us/web/css/guides/anchor_positioning/using/index.md
+91-1Lines changed: 91 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -119,9 +119,99 @@ For example, to stop a customizable `<select>` element's picker from being ancho
119
119
}
120
120
```
121
121
122
+
## Anchor scoping
123
+
124
+
When multiple anchor elements are given the same {{cssxref("anchor-name")}} value and a positioned element has that name as its {{cssxref("position-anchor")}} property value, the positioned element will be associated with the _last_ anchor element in the source order with that `anchor-name` value.
125
+
126
+
For example, if a document contains multiple repeated components, each with a positioned element tethered to an anchor, all the positioned elements will be anchored to the last anchor on the page unless each component uses a different anchor name. This is likely not the desired behavior.
127
+
128
+
The {{cssxref("anchor-scope")}} property can fix this problem by limiting the visibility, or "scope", of an `anchor-name` value to a specific subtree. The result is that each positioned element can only be anchored to an element within the same subtree of the element that has the scope set on it.
129
+
130
+
-`anchor-scope: all` sets the scope so that _any_`anchor-name` values set in the subtree can only be bound to by positioned elements in the same subtree.
131
+
-`anchor-scope: --my-anchor, --my-anchor2` sets the scope so that the specified `anchor-name` values, when set in the subtree, can only be bound to by positioned elements in the same subtree.
132
+
-`anchor-scope: none` is the default value; it specifies that no anchor scoping is set.
133
+
134
+
For example, let's say you have an multiple anchor and anchor-positioned {{htmlelement("div")}} elements inside {{htmlelement("section")}} containers:
135
+
136
+
```html live-sample___anchor-scope
137
+
<sectionclass="scoped">
138
+
<divclass="anchor">⚓︎</div>
139
+
<divclass="positioned">Positioned 1</div>
140
+
</section>
141
+
142
+
<sectionclass="scoped">
143
+
<divclass="anchor">⚓︎</div>
144
+
<divclass="positioned">Positioned 2</div>
145
+
</section>
146
+
147
+
<sectionclass="scoped">
148
+
<divclass="anchor">⚓︎</div>
149
+
<divclass="positioned">Positioned 3</div>
150
+
</section>
151
+
```
152
+
153
+
We turn each `anchor``<div>` into an anchor element by giving them an `anchor-name` of `--my-anchor`. We then position each `positioned``<div>` relative to an element with the `--my-anchor` anchor name by giving them absolute positioning, a `position-anchor` value of `--my-anchor`, and a {{cssxref("position-area")}} value of `right`. Finally, we set the anchor scope of each `<section>` container using `anchor-scope: --my-anchor`:
154
+
155
+
```css hidden live-sample___anchor-scope
156
+
html {
157
+
height: 100%;
158
+
}
159
+
160
+
body {
161
+
height: inherit;
162
+
display: flex;
163
+
justify-content: space-evenly;
164
+
align-items: center;
165
+
}
166
+
167
+
.scoped {
168
+
padding: 20px;
169
+
background: #eee;
170
+
}
171
+
172
+
.anchor {
173
+
font-size: 1.8rem;
174
+
color: white;
175
+
text-shadow: 1px1px1pxblack;
176
+
background-color: blue;
177
+
width: fit-content;
178
+
padding: 3px;
179
+
}
180
+
181
+
.positioned {
182
+
background: orange;
183
+
width: fit-content;
184
+
padding: 3px;
185
+
}
186
+
```
187
+
188
+
```css live-sample___anchor-scope
189
+
.anchor {
190
+
anchor-name: --my-anchor;
191
+
}
192
+
193
+
.positioned {
194
+
position: absolute;
195
+
position-anchor: --my-anchor;
196
+
position-area: right;
197
+
}
198
+
199
+
.scoped {
200
+
anchor-scope: --my-anchor;
201
+
}
202
+
```
203
+
204
+
This results in the following positioning behavior:
Each positioned element is positioned relative to the anchor inside the same `<section>` element. This is because each `<section>` element has an `anchor-scope` of `--my-anchor` set on it; positioned elements inside each scoped container can therefore only be positioned relative to `my-anchor` anchors inside the same container.
209
+
210
+
If we didn't set `anchor-scope: --my-anchor` on the containers, all of the positioned elements would be positioned relative to the last anchor on the page.
211
+
122
212
## Positioning elements relative to their anchor
123
213
124
-
As we saw above, associating a positioned element with an anchor is not really much use on its own. Our goal is to place the positioned element relative to its associated anchor element. This is done either by setting a [CSS `anchor()` function](#using_inset_properties_with_anchor_function_values) value on an [inset property](/en-US/docs/Glossary/Inset_properties), [specifying a `position-area`](#setting_a_position-area), or centering the positioned element with the [`anchor-center` placement value](#centering_on_the_anchor_using_anchor-center).
214
+
As we saw earlier, associating a positioned element with an anchor is not really much use on its own. Our goal is to place the positioned element relative to its associated anchor element. This is done either by setting a [CSS `anchor()` function](#using_inset_properties_with_anchor_function_values) value on an [inset property](/en-US/docs/Glossary/Inset_properties), [specifying a `position-area`](#setting_a_position-area), or centering the positioned element with the [`anchor-center` placement value](#centering_on_the_anchor_using_anchor-center).
125
215
126
216
> [!NOTE]
127
217
> CSS anchor positioning also provides mechanisms for specifying fallback positions if the positioned element's default position causes it to overflow the viewport. See the [Fallback options and conditional hiding](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Try_options_hiding) guide for details.
0 commit comments