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 1aa85c7d67f5888..75efd45c896b64e 100644 --- a/files/en-us/web/api/popover_api/using/index.md +++ b/files/en-us/web/api/popover_api/using/index.md @@ -434,6 +434,8 @@ For example, you could use a combination of {{cssxref("anchor()")}} function val ```css .my-popover { + margin: 0; + inset: auto; bottom: calc(anchor(top) + 20px); justify-self: anchor-center; } @@ -443,10 +445,14 @@ 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). + See [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_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] diff --git a/files/en-us/web/css/anchor/index.md b/files/en-us/web/css/anchor/index.md index 44e879a56f0c86b..323c7a53219d15b 100644 --- a/files/en-us/web/css/anchor/index.md +++ b/files/en-us/web/css/anchor/index.md @@ -131,6 +131,19 @@ The below table lists the inset properties, and the `` parameter va | `inset-block-start` and `inset-block-end` | `start`, `end`, `self-start`, and `self-end`
`top` and `bottom` in horizontal writing modes
`left` and `right` in vertical writing modes | | `inset-inline-start` and `inset-inline-end` | `start`, `end`, `self-start`, and `self-end`
`left` and `right` in horizontal writing modes
`top` and `bottom` in vertical writing modes | +### Using `anchor()` to position popovers + +When using `anchor()` 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: + +```css +.positionedPopover { + 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). + ### 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 positioned element as needed. Alternatively, you can include the `anchor()` function within a {{cssxref("calc")}} function to add spacing. diff --git a/files/en-us/web/css/position-area/index.md b/files/en-us/web/css/position-area/index.md index dcd3e314f68f560..4411420a9aa0066 100644 --- a/files/en-us/web/css/position-area/index.md +++ b/files/en-us/web/css/position-area/index.md @@ -115,6 +115,19 @@ If the positioned element is placed in a single top-center, bottom-center, or ce If the positioned element is placed in any other single grid square (say with `position-area: top left`) or is set to span two or more grid squares (for example using `position-area: bottom span-all`), it will align with the specified grid area but behave as if it has a {{cssxref("width")}} of `max-content` set on it. It is being sized according to its containing block size, which is the size imposed on it when it was set to `position: fixed`. It will stretch as wide as the text content, although it may also be constrained by the edge of the ``. +### 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: + +```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). + ## Formal definition {{cssinfo}}