Merge pull request #792 from oddbird/anchor-valid-edit

Update top layer examples

content/blog/2025/anchor-position-validity.md

@@ -1,5 +1,5 @@
 ---
-title: Here's why your anchor positioning isn't working
+title: Here's Why Your Anchor Positioning Isn't Working
 sub: How to find an anchor element
 date: 2025-01-29
 image:
@@ -208,15 +208,7 @@ the anchor element is in a [higher top
 layer](https://drafts.csswg.org/css-position-4/#top-layer) than the positioned
 element, the positioned element will not be able to locate the anchor.
 
-This area needs additional investigation. My reading of the spec says that an
-element _inside_ a higher top layer (for instance, a button inside a dialog) can
-be anchored to an element in a lower layer. However, I can't seem to get that to
-work, and I'm not sure it should. The containing block of the dialog or popover
-might not overlap with the anchor, so it's not clear to me how the top layer
-would handle overflow.
-
-What _does_ work is anchoring the dialog or popover itself to an element in the
-bottom layer.
+You can position the root popover or dialog directly using `position: absolute`.
 
 {{ embed.codepen(
   id='OPLzjJq',
@@ -226,6 +218,19 @@ bottom layer.
   tab='html,result'
 ) }}
 
+However, if you want to position an element that is inside the popover or
+dialog, you will need to use `position: fixed`. Note that the positioned
+elements are not inside their parents in this example -- `position: fixed` moves
+the element's containing block to the viewport and allows positioning to work.
+
+{{ embed.codepen(
+  id='vEBbVXq',
+  title='Top Layer - inside',
+  user='jamessw',
+  height=250,
+  tab='html,result'
+) }}
+
 <h3 id="anchoring-across-shadow-trees">Anchoring across shadow trees</h3>
 
 An element in one tree can anchor to an element in another tree, as long as the