Multiple Anchors | CSS-Tricks
[ad_1]
Just Chris, right? You want to display this in a Chromium browser:
This is exactly the kind of thing I love, not because of its practicality (because it isn’t), but because it illustrates a concept. Generally, tutorials and demos try to follow the “rules” – whatever they may be – but breaking them can help you better understand how a particular thing works. This is one of them.
The concept is pretty simple: one target element can be attached to several anchor on the page.
We need to register and attach the anchors .target to her:
.anchor-1 {
anchor-name: --anchor-1;
}
.anchor-2 {
anchor-name: --anchor-2;
}
.target {
}Wait, wait! I didn’t attach that .target to the anchors. That’s because we have two ways to do it. One is with the position-anchor Property.
.target {
position-anchor: --anchor-1;
}This creates a target-anchor relationship between the two elements. However, it only accepts a single anchor value. Hmmm. We need more than that. That’s what the anchor() Function can. Well, it doesn’t need multiple values, but we can declare it multiple times for different insert properties, each pointing to a different anchor.
.target {
top: anchor(--anchor-1, bottom);
}The second piece of anchor()The function is the anchor edge where we are positioned and it has to be that way some kind of physical or logical insertion — top, bottom, start, end, inside, outsideetc. – or percentage. We’re basically saying, “Take this .target and slap it top Edge against --anchor-1Bottom edge.
This also works for other inserted properties:
.target {
top: anchor(--anchor-1 bottom);
left: anchor(--anchor-1 right);
bottom: anchor(--anchor-2 top);
right: anchor(--anchor-2 left);
}Note that both anchors are declared for different properties anchor(). This is awesome. But we’re not really anchored yet because the… .target is just like any other element that participates in the normal document flow. We need to drag it out with absolute positioning so that the inserted properties take hold.
.target {
position: absolute;
top: anchor(--anchor-1 bottom);
left: anchor(--anchor-1 right);
bottom: anchor(--anchor-2 top);
right: anchor(--anchor-2 left);
}In his demo, Chris cleverly adds this .target until two