From 30262ee109e041b3b90057a6b447a98e37beecd1 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 7 Sep 2026 13:12:57 +0100 Subject: [PATCH 1/2] Update the reset information around anchor-positioning of popovers --- files/en-us/web/api/popover_api/using/index.md | 6 +++--- .../css/reference/properties/position-area/index.md | 11 ++--------- files/en-us/web/css/reference/values/anchor/index.md | 2 -- 3 files changed, 5 insertions(+), 14 deletions(-) diff --git a/files/en-us/web/api/popover_api/using/index.md b/files/en-us/web/api/popover_api/using/index.md index 96a297265862cc9..789d25d71e611df 100644 --- a/files/en-us/web/api/popover_api/using/index.md +++ b/files/en-us/web/api/popover_api/using/index.md @@ -477,13 +477,13 @@ Or you could use a {{cssxref("position-area")}} property: ```css .my-popover { - margin: 0; - inset: auto; position-area: top; } ``` -When using {{cssxref("position-area")}} or {{cssxref("anchor()")}} to position popovers, be aware that [the default styles for popovers](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=%5Bpopover%5D%20%7B) may conflict with the position you're trying to achieve. The usual culprits are the default styles for `margin` and `inset`, so it's advisable to reset those, as in the examples above. The CSS working group is [looking at ways to avoid requiring this workaround](https://github.com/w3c/csswg-drafts/issues/10258). +When using {{cssxref("anchor()")}} to position popovers, be aware that [the default styles for popovers](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=%5Bpopover%5D%20%7B) may conflict with the position you're trying to achieve. The usual culprits are the default styles for `margin` and `inset`, so it's advisable to reset those, as shown in the first example in this section. + +This is not an issue with popovers positioned with {{cssxref("position-area")}} because the used value of `auto` [inset](/en-US/docs/Glossary/Inset_properties) and {{cssxref("margin")}} properties resolves to `0` on any element that has a `position-area` value set other than `none`. This is also the case with boxes positioned with `anchor-center`, provided the box is absolutely-positioned. However, because `anchor-center` values are often used along with `anchor()` values, you'll probably still need the resets in these situations. See [Using CSS anchor positioning](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#positioning_elements_relative_to_their_anchor) for more details on associating anchor and positioned elements, and positioning elements relative to their anchor. diff --git a/files/en-us/web/css/reference/properties/position-area/index.md b/files/en-us/web/css/reference/properties/position-area/index.md index c72707bcb2883e4..e25e345df9e7534 100644 --- a/files/en-us/web/css/reference/properties/position-area/index.md +++ b/files/en-us/web/css/reference/properties/position-area/index.md @@ -118,16 +118,9 @@ If the positioned element is placed in any other single grid square (say with `p ### Using `position-area` to position popovers -When using `position-area` to position [popovers](/en-US/docs/Web/HTML/Reference/Global_attributes/popover), be aware that [the default styles for popovers](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=%5Bpopover%5D%20%7B) may conflict with the position you're trying to achieve. The usual culprits are the default styles for `margin` and `inset`, so it's advisable to reset those: +When using `position-area` to position [popovers](/en-US/docs/Web/HTML/Reference/Global_attributes/popover), be aware that the used value of `auto` [inset](/en-US/docs/Glossary/Inset_properties) and {{cssxref("margin")}} properties resolves to `0` on any element that has a `position-area` value set other than `none`. This means that the [the default styles for popovers](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=%5Bpopover%5D%20%7B) will not conflict with the position you are trying to set via `position-area`. -```css -.my-popover { - margin: 0; - inset: auto; -} -``` - -The CSS working group is [looking at ways to avoid requiring this workaround](https://github.com/w3c/csswg-drafts/issues/10258). +This is not the case with the {{cssxref("anchor()")}} function — see [Using `anchor()` to position popovers](/en-US/docs/Web/CSS/Reference/Values/anchor#using_anchor_to_position_popovers). ## Formal definition diff --git a/files/en-us/web/css/reference/values/anchor/index.md b/files/en-us/web/css/reference/values/anchor/index.md index 3525a215ea34bc0..9c97f63c99d0079 100644 --- a/files/en-us/web/css/reference/values/anchor/index.md +++ b/files/en-us/web/css/reference/values/anchor/index.md @@ -143,8 +143,6 @@ When using `anchor()` to position [popovers](/en-US/docs/Web/HTML/Reference/Glob } ``` -The CSS working group is [looking at ways to avoid requiring this workaround](https://github.com/w3c/csswg-drafts/issues/10258). - ### Using `anchor()` inside `calc()` When the `anchor()` function refers to a side of the default anchor, you can include a {{cssxref("margin")}} to create spacing between the edges of the anchor and the positioned element as needed. Alternatively, you can include the `anchor()` function within a {{cssxref("calc")}} function to add spacing. From 1a716e6b0c2a6709333135f5e77f640de7fd643a Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Tue, 8 Sep 2026 09:37:29 +0100 Subject: [PATCH 2/2] Update information relating to position-anchor: auto --- files/en-us/web/api/popover_api/using/index.md | 9 +++++---- .../web/css/guides/anchor_positioning/using/index.md | 6 ++++++ .../css/reference/properties/position-anchor/index.md | 2 ++ 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/api/popover_api/using/index.md b/files/en-us/web/api/popover_api/using/index.md index 789d25d71e611df..7163c88a3db744a 100644 --- a/files/en-us/web/api/popover_api/using/index.md +++ b/files/en-us/web/api/popover_api/using/index.md @@ -460,14 +460,15 @@ There is another useful positioning option that the Popover API provides. If you [Associating any kind of popover with its invoker](#other_ways_to_set_up_a_popover-invoker_relationship) creates an implicit anchor reference between the two. This causes the invoker to become the popover's **anchor element**, meaning that you can position the popover relative to it using [CSS anchor positioning](/en-US/docs/Web/CSS/Guides/Anchor_positioning). -Because the association between the popover and the invoker is implicit, an explicit association does not need to be made using the {{cssxref("anchor-name")}} and {{cssxref("position-anchor")}} properties. However, you still need to specify the positioning CSS. +Because the association between the popover and the invoker is implicit, you do not need to name the anchor using {{cssxref("anchor-name")}}. The implicit anchor is adopted automatically when you position the popover with {{cssxref("position-area")}}. However, if you position it using {{cssxref("anchor()")}} or `anchor-center`, `position-anchor: auto` is required to opt in. The initial value of {{cssxref("position-anchor")}} is `normal`, which behaves as `none` while `position-area` is `none`. -For example, you could use a combination of {{cssxref("anchor()")}} function values set on {{glossary("inset properties")}}, and `anchor-center` values set on alignment properties: +For example, you could use a combination of an `anchor()` function value set on an {{glossary("inset properties","inset property")}}, and an `anchor-center` value set on an alignment property: ```css .my-popover { margin: 0; inset: auto; + position-anchor: auto; bottom: calc(anchor(top) + 20px); justify-self: anchor-center; } @@ -488,10 +489,10 @@ This is not an issue with popovers positioned with {{cssxref("position-area")}} See [Using CSS anchor positioning](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#positioning_elements_relative_to_their_anchor) for more details on associating anchor and positioned elements, and positioning elements relative to their anchor. > [!NOTE] -> For an example that uses this implicit association, see our [popover hint demo](https://mdn.github.io/dom-examples/popover-api/popover-hint/) ([source](https://github.com/mdn/dom-examples/tree/main/popover-api/popover-hint)). If you check out the CSS code, you'll see that no explicit anchor associations are made using the {{cssxref("anchor-name")}} and {{cssxref("position-anchor")}} properties. +> For an example that uses this implicit association, see our [popover hint demo](https://mdn.github.io/dom-examples/popover-api/popover-hint/) ([source](https://github.com/mdn/dom-examples/tree/main/popover-api/popover-hint)). If you check out the CSS code, you'll see implicit association examples using both `position-area` and `anchor()`/`anchor-center`. > [!NOTE] -> If you want to remove the implicit anchor reference to stop the popover from being anchored to its invoker, you can do so by setting the `position-anchor` property of the popover to an anchor name that doesn't exist in the current document, such as `--not-an-anchor-name`. See also [removing an anchor association](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#removing_an_anchor_association). +> If you want to remove the implicit anchor reference to stop the popover from being anchored to its invoker, you can do so by setting the `position-anchor` property of the popover to `none`, or to an anchor name that doesn't exist in the current document, such as `--not-an-anchor-name`. See also [removing an anchor association](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#removing_an_anchor_association). ## Animating popovers diff --git a/files/en-us/web/css/guides/anchor_positioning/using/index.md b/files/en-us/web/css/guides/anchor_positioning/using/index.md index 66bc202b523abab..3873dde899e49bd 100644 --- a/files/en-us/web/css/guides/anchor_positioning/using/index.md +++ b/files/en-us/web/css/guides/anchor_positioning/using/index.md @@ -99,6 +99,9 @@ In some cases, an implicit anchor reference will be made between two elements, d - Programmatically associating a popover action such as {{domxref("HTMLElement.showPopover", "showPopover()")}} with a control using the `source` option. - A {{htmlelement("select")}} element and its dropdown picker are opted into [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) functionality via the {{cssxref("appearance")}} property `base-select` value. In this case, an implicit popover-invoker relationship is created between the two, which also means they'll have an implicit anchor reference. +> [!NOTE] +> See [Popover anchor positioning](/en-US/docs/Web/API/Popover_API/Using#popover_anchor_positioning) for more information on positioning elements relative to their implicit anchors. + > [!NOTE] > The methods above associate an anchor with an element, but they are not yet tethered. To tether them together, the positioned element needs to be positioned relative to its anchor, which is done with CSS. @@ -361,6 +364,9 @@ This gives us the following result: The positioned element is `5px` below and `5px` to the right of the anchor element. If you scroll the document up and down, the positioned element maintains its position relative to the anchor element — it is fixed to the anchor element, not the viewport. +> [!NOTE] +> When positioning elements relative to [implicit anchors](#implicit_anchor_association) using `anchor()`, some additional steps are required, such as resetting default positioning property values, and setting `position-anchor: auto` to opt-in to the implicit association. See [Popover anchor positioning](/en-US/docs/Web/API/Popover_API/Using#popover_anchor_positioning) for more information. + ### Setting a `position-area` The {{cssxref("position-area")}} property provides an alternative to the `anchor()` function for positioning elements relative to anchors. The `position-area` property works on the concept of a 3x3 grid of tiles, with the anchor element being the center tile. The `position-area` property can be used to position the anchor positioned element in any of the nine tiles, or have it span across two or three tiles. diff --git a/files/en-us/web/css/reference/properties/position-anchor/index.md b/files/en-us/web/css/reference/properties/position-anchor/index.md index 3f87c5827ee98ca..4a6d23a1166d2d3 100644 --- a/files/en-us/web/css/reference/properties/position-anchor/index.md +++ b/files/en-us/web/css/reference/properties/position-anchor/index.md @@ -59,6 +59,8 @@ To cancel a previously-made association between an anchor-positioned element and To tether a positioned element to its anchor, it must be placed relative to an anchor element using an anchor positioning feature, such as the {{cssxref("anchor()")}} function (set as a value on {{glossary("inset properties")}}) or the {{cssxref("position-area")}} property. +When positioning elements relative to [implicit anchors](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#implicit_anchor_association) using `anchor()`, set `position-anchor: auto` on the anchor-positioned element to opt-in to the implicit association. See [Popover anchor positioning](/en-US/docs/Web/API/Popover_API/Using#popover_anchor_positioning) for more information. + If the associated anchor is hidden, for example with {{cssxref("display", "display: none")}} or {{cssxref("visibility", "visibility: hidden")}}, or if it is part of the [skipped contents](/en-US/docs/Web/CSS/Guides/Containment/Using#skips_its_contents) of another element due to it having {{cssxref("content-visibility", "content-visibility: hidden")}} set on it, the anchor positioned element will not be displayed. The `position-anchor` property is supported on all elements that are positioned, including [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) like {{cssxref("::before")}} and {{cssxref("::after")}}. Pseudo elements are implicitly anchored to the same element as the pseudo-element's originating element, unless otherwise specified.