Skip to content

added normal & match-parent values and updated intro #44017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dletorey wants to merge 4 commits into
base: main
Choose a base branch
from
+10 −2
Open

added normal & match-parent values and updated intro #44017

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
002f1c3
added normal & match-parent values and updated intro
dletorey May 5, 2026
e60f4e9
Merge branch 'main' into 43867-position-anchor-normal
dletorey May 5, 2026
bf42bcf
Apply suggestion from @hamishwillee
hamishwillee May 8, 2026
9363199
Apply suggestion from @hamishwillee
hamishwillee May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions files/en-us/web/css/reference/properties/position-anchor/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,17 @@ browser-compat: css.properties.position-anchor
sidebar: cssref
---

The **`position-anchor`** [CSS](/en-US/docs/Web/CSS) property specifies the anchor name of the **anchor element** (i.e., an element that has an **anchor name** set on it via the {{cssxref("anchor-name")}} property) a positioned element is associated with.
The **`position-anchor`** [CSS](/en-US/docs/Web/CSS) property specifies the default **anchor element** (i.e., an element that has an **anchor name** set on it via the {{cssxref("anchor-name")}} property), which is used by {{cssxref("position-area")}}, {{cssxref("position-try")}}, and (by default) all anchor functions ({{cssxref("anchor()")}} and {{cssxref("anchor-size()")}}) applied to this element.
Copy link
Copy Markdown
Collaborator

@hamishwillee hamishwillee May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem predates your chagens, but I don't understand this as written. I think it means this - can you confirm? Note that I used <anchor-name> rather than the property, because those methods specify it this way. When you link though, the value is an anchor-name property value.

Suggested change
The **`position-anchor`** [CSS](/en-US/docs/Web/CSS) property specifies the default **anchor element** (i.e., an element that has an **anchor name** set on it via the {{cssxref("anchor-name")}} property), which is used by {{cssxref("position-area")}}, {{cssxref("position-try")}}, and (by default) all anchor functions ({{cssxref("anchor()")}} and {{cssxref("anchor-size()")}}) applied to this element.
The **`position-anchor`** [CSS](/en-US/docs/Web/CSS) property specifies the default **anchor element** for a positioned element.
This default is used by {{cssxref("position-area")}} and {{cssxref("position-try")}}, and by anchor functions ({{cssxref("anchor()")}} and {{cssxref("anchor-size()")}}) when no `<anchor-name>` argument is provided to those functions.


## Syntax

```css
/* Single values */
position-anchor: normal;
position-anchor: auto;
position-anchor: none;
position-anchor: --anchor-name;
position-anchor: match-parent;

/* Global values */
position-anchor: inherit;
Expand All @@ -27,15 +29,21 @@ position-anchor: unset;

### Values

- `normal`
- : If {{cssxref("position-area")}} is `none`, behaves as `none`. Otherwise, behaves as `auto`.
Copy link
Copy Markdown
Collaborator

@hamishwillee hamishwillee May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- : If {{cssxref("position-area")}} is `none`, behaves as `none`. Otherwise, behaves as `auto`.
- : If {{cssxref("position-area")}} is `none`, it behaves as `none`. Otherwise it behaves as `auto`.


- `auto`
- : Associates a positioned element with its implicit anchor element, if it has one — for example as set by the non-standard HTML [`anchor`](/en-US/docs/Web/HTML/Reference/Global_attributes/anchor) attribute.

- `none`
- : The initial (default) value. The positioned element is not associated with an anchor element.
- : The positioned element is not associated with an anchor element.

- {{cssxref("dashed-ident")}}
- : The name of the anchor element to associate the positioned element with, as listed in the anchor element's {{cssxref("anchor-name")}} property. This is known as the **default anchor specifier**.

- `match-parent`
- : Uses the same default anchor element as the parent or originating element, if this is a [pseudo-element](/en-US/docs/Glossary/Pseudo-element) ​if any, and if that would be an acceptable anchor element. Otherwise it has no default anchor element.
Copy link
Copy Markdown
Collaborator

@hamishwillee hamishwillee May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand this. Does it mean:

Suggested change
- : Uses the same default anchor element as the parent or originating element, if this is a [pseudo-element](/en-US/docs/Glossary/Pseudo-element) ​if any, and if that would be an acceptable anchor element. Otherwise it has no default anchor element.
- : Uses the same default anchor element as the parent element, or the originating element if this is a [pseudo-element](/en-US/docs/Glossary/Pseudo-element), provided that would be an acceptable anchor element. Otherwise, it has no default anchor element.

Note, I don't know what would make a pseudo element acceptable


## Description

This property is only relevant to "positioned" elements — elements and pseudo-elements that have a {{cssxref("position")}} of `absolute` or `fixed` set.
Expand Down
Loading