This demo creates an anchor and tethers a positioned element to it. It also provides a drop-down menu allowing you to choose various position-area values to apply to the positioned element, to see their effect. One of the options causes a text field to appear that enables you to enter a custom value. Finally, a checkbox is provided to turn writing-mode: vertical-lr on and off, allowing you to observe how position-area value effects differ across different writing modes.
HTML
In the HTML, we specify two <div> elements, one with a class of anchor and one with a class of infobox. These are intended to be the anchor element and the positioned element we will associate with it, respectively. We've included the contenteditable attribute on both, making them directly editable.
We've also included two forms that contain the <select> and <input type="text"> elements for setting different position-area values, and the <input type="checkbox"> element for toggling the vertical writing-mode on and off. The code for these, along with the JavaScript, has been hidden for the sake of brevity.
<div class="anchor" contenteditable>⚓︎</div>
<div class="infobox">
<p contenteditable>You can edit this text.</p>
</div>
CSS
In the CSS, we first declare the anchor <div> as an anchor element by setting an anchor name on it via the anchor-name property.
The positioned element is associated with the anchor element by setting its anchor name as the value of the positioned element's position-anchor property. We also give it an initial position with position-area: top left; this will be overridden when new values are selected from the <select> menu. Finally, we set its opacity to 0.8, so that when the positioned element is given a position-area value that places it over the top of the anchor, you can still see the elements' position relative to one another.
.anchor {
anchor-name: --myAnchor;
}
.infobox {
position-anchor: --myAnchor;
position: fixed;
opacity: 0.8;
position-area: top left;
}
Result
The result is as follows:
Try selecting new position-area values from the <select> menu to see the effect they have on the position of the infobox. Select the "Custom" value and try entering some custom position-area values into the text input to see their effect. Add text to the anchor and the anchor positioned elements to see how the anchor positioned element grows based on the position-area value. Finally, check the checkbox and then experiment with different position-area values to see which ones give the same result across different writing modes, and which ones give different results.
