oddbird · jamesnw · Apr 8, 2025 · Jan 31, 2025 · Jan 31, 2025 · Feb 1, 2025
diff --git a/README.md b/README.md
@@ -147,18 +147,26 @@ following features:
 - Polyfill allows anchoring in scroll more permissively than the spec allows,
   for instance without a default `position-anchor`.
 - `anchor-scope` property on pseudo-elements
-- `position-area` property
 - `anchor-center` value for `justify-self`, `align-self`, `justify-items`, and
   `align-items` properties
 - `position-visibility` property
 - dynamically added/removed anchors or targets
 - anchors or targets in the shadow-dom
-- anchors or targets in constructed stylesheets (https://github.com/oddbird/css-anchor-positioning/issues/228)
+- anchors or targets in constructed stylesheets
+  (https://github.com/oddbird/css-anchor-positioning/issues/228)
 - anchor functions assigned to `inset-*` properties or `inset` shorthand
   property
-- vertical/rtl writing-modes (partial support)
+- vertical/rtl writing-modes for anchor functions (partial support)
 - implicit anchors or the `position-anchor: auto` keyword (pending resolution of
-  https://github.com/whatwg/html/pull/9144)
+- `position-area` is polyfilled by adding a wrapping element around the target,
+  which adds a few differences:
+  - This breaks selectors that rely on a direct relationship with the target,
+    for instance `~ target`, `+ target`, `> target` or using `:nth` selectors.
+  - Overflow alignment is not applied for a target that overflows its
+    inset-modified containing block but would still fit within its original
+    containing block. In other words, a polyfilled target may be placed in a
+    `position-area` grid section outside its containing block, where the
+    implementation would move the target inside the containing block.
 
 In addition, JS APIs like `CSSPositionTryRule` or `CSS.supports` will not be
 polyfilled.

diff --git a/index.html b/index.html
@@ -43,6 +43,7 @@
     <link rel="stylesheet" href="/anchor-pseudo-element.css" />
     <link rel="stylesheet" href="/anchor-media-query.css" />
     <link rel="stylesheet" href="/anchor-scope.css" />
+    <link rel="stylesheet" href="/position-area.css" />
     <link rel="stylesheet" href="/anchor-inside-outside.css" />
     <!-- Included to test invalid stylesheets -->
     <link rel="stylesheet" href="/fake.css" />
@@ -229,7 +230,7 @@
   </head>
   <body>
     <header>
-      <h1>CSS Anchor Positioning Polyfill</h1>
+      <h1><a href="/">CSS Anchor Positioning Polyfill</a></h1>
       <nav>
         <span> See also: </span>
         <a
@@ -965,6 +966,31 @@ <h2>
 
 #other {
   --center: anchor(--anchor-duplicate-custom-props 100%);
+}</code></pre>
+    </section>
+    <section id="position-area" class="demo-item">
+      <h2>
+        <a href="#position-area" aria-hidden="true">🔗</a>
+        Positioning with <code>position-area</code>
+      </h2>
+      <div style="position: relative" class="demo-elements">
+        <div class="anchor">Anchor</div>
+        <div class="target">Target</div>
+      </div>
+      <p class="note">
+        With polyfill applied: Target is positioned to the top right of the
+        Anchor. See <a href="position-area.html">more examples</a> of
+        <code>position-area</code>.
+      </p>
+      <pre><code class="language-css"
+>#position-area .anchor {
+  anchor-name: --position-area-anchor;
+}
+
+#position-area .target {
+  position: absolute;
+  position-area: top right;
+  position-anchor: --position-area-anchor;
 }</code></pre>
     </section>
     <section id="anchor-size" class="demo-item">

diff --git a/package-lock.json b/package-lock.json