diff --git a/README.md b/README.md index a38a7548..ff54ae9a 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,6 @@ following: - anchor functions with `implicit` anchor-element - automatic anchor positioning: anchor functions with `inside` or `outside` anchor-side -- `anchor-name` property defining multiple anchor names - `position-visibility` property - dynamically added/removed anchors or targets - anchors or targets in the shadow-dom diff --git a/index.html b/index.html index 890339a3..4368a4be 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@ + @@ -664,6 +665,38 @@

right: anchor(--my-anchor-update right); top: anchor(--my-anchor-update bottom); } + +
+

+ + Use a list of anchor names +

+
+
Anchor
+
Target A
+
Target B
+
+

+ With polyfill applied: Target A is positioned at Anchor's top left + corner. Target B is positioned at Anchor's bottom right corner. +

+
#my-anchor-name-list {
+  anchor-name: --my-anchor-name-a, --my-anchor-name-b;
+}
+
+#my-target-name-list-a {
+  position: absolute;
+  right: anchor(--my-anchor-name-a left);
+  bottom: anchor(--my-anchor-name-a top);
+}
+
+#my-target-name-list-b {
+  position: absolute;
+  left: anchor(--my-anchor-name-b right);
+  top: anchor(--my-anchor-name-b bottom);
+}
+