Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>anchor() resolution in position-area</title>
<style>
.container {
width: 100px; height: 100px;
border: solid gray;
margin: 6px;
position: relative;
anchor-scope: all;
float: left;
}
.block {
background: silver;
height: 40px;
width: 40px;
margin: 10px;
}
.anchor {
position: absolute;
border: solid orange;
margin: 25px;
}
.controls .anchor,
.pull-up .anchor {
width: 5px;
height: 5px;
}
.push-down .anchor {
width: 40px;
height: 40px;
}
.anchored {
border: solid blue;
position: absolute;
inset: 0;
place-self: stretch;
}
body > div { clear: both; }
</style>
<div class=pull-up>
<div class=container>
<div class=anchor></div>
<div class=block></div>
<div class=anchored style="top: 36px; left: 36px;"></div>
</div>
<div class=container>
<div class=anchor></div>
<div class=block></div>
<div class=anchored style="top: 36px; left: 50px;"></div>
</div>
</div>
<div class=push-down>
<div class=container>
<div class=anchor></div>
<div class=block></div>
<div class=anchored style="top: 71px; left: 71px"></div>
</div>
<div class=container>
<div class=anchor></div>
<div class=block></div>
<div class=anchored style="top: 71px; left: 50px"></div>
</div>
</div>
<div class=controls>
<div class=container>
<div class=anchor></div>
<div class=block></div>
<div class=anchored style="top: 36px"></div>
</div>
<div class=container>
<div class=anchor></div>
<div class=block></div>
<div class=anchored style="top: 25px; left: 36px"></div>
</div>
</div>