Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/anchor-center-overflow-005.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>anchor-center overflow adjustments (anchored < inset area, with margin)</title>
<link rel="match" href="anchor-center-overflow-005-ref.html">
<link rel="author" name="David Shin" href="mailto:dshin@mozilla.com">
<style>
.abs-cb {
display: inline-block;
box-sizing: border-box;
border: 5px solid;
width: 100px;
height: 100px;
anchor-scope: --a;
position: relative;
}
.anchor {
anchor-name: --a;
width: 20px;
height: 20px;
background: pink;
position: absolute;
inset: 0;
}
.positioned {
position: absolute;
width: 50px;
height: 50px;
margin: 5px;
position-anchor: --a;
background: purple;
}
.anchor.tl {
align-self: start;
justify-self: start;
}
.anchor.tr {
align-self: start;
justify-self: end;
}
.anchor.bl {
align-self: end;
justify-self: start;
}
.anchor.br {
align-self: end;
justify-self: end;
}
.positioned.bc {
top: anchor(bottom);
justify-self: anchor-center;
}
.positioned.tc {
bottom: anchor(top);
justify-self: anchor-center;
}
.positioned.cr {
left: anchor(right);
align-self: anchor-center;
}
.positioned.cl {
right: anchor(left);
align-self: anchor-center;
}
</style>
<div class=abs-cb>
<div class="anchor tl"></div>
<div class="positioned bc"></div>
</div
><div class=abs-cb>
<div class="anchor tl"></div>
<div class="positioned cr"></div>
</div
><div class=abs-cb>
<div class="anchor tr"></div>
<div class="positioned bc"></div>
</div
><div class=abs-cb>
<div class="anchor tr"></div>
<div class="positioned cl"></div>
</div><br>
<div class=abs-cb>
<div class="anchor bl"></div>
<div class="positioned tc"></div>
</div
><div class=abs-cb>
<div class="anchor bl"></div>
<div class="positioned cr"></div>
</div
><div class=abs-cb>
<div class="anchor br"></div>
<div class="positioned tc"></div>
</div
><div class=abs-cb>
<div class="anchor br"></div>
<div class="positioned cl"></div>
</div>