<div class="one">one</div>
<div class="two">two</div>
<div class="anchored">I am anchored to two elements</div>
.one,
.two {
position: absolute;
padding: 1rem;
border: 2px solid;
background: gold;
}
.one {
anchor-name: --one;
}
.two {
anchor-name: --two;
bottom: 0;
right: 0;
}
.anchored {
position: absolute;
top: anchor(--one bottom);
left: anchor(--one right);
right: anchor(--two left);
bottom: anchor(--two top);
display: grid;
place-items: center;
}
body {
height: 100dvh;
font-family: system-ui;
font-size: 18px;
margin: 0;
}
.anchored {
background: skyblue;
}