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-scroll-to-sticky-005.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class='reftest-wait'>
<title>Test: Fixed box anchors to sticky child while scrolling</title>
<link rel="match" href="anchor-scroll-to-sticky-005-ref.html">
<style>
#sticky {
position: sticky;
inset-block-start: 0;
background: teal;
border: 10px solid aqua;
color: white;
anchor-name: --sticky;
}
#child {
anchor-name: --sticky-child;
background: blue;
border: 5px solid navy;
margin-inline: 25%;
}
.anchored {
position: absolute;
background: fuchsia;
padding: 4px;
}
.anchored.positionArea {
position-area: bottom span-right;
}
.anchored.anchorFunction {
top: anchor(outside);
right: anchor(inside);
}
.anchored.sticky {
position-anchor: --sticky;
}
.anchored.sticky-child {
position-anchor: --sticky-child;
}
:root {
padding: 40px;
block-size: 200%;
}
body {
border: 2px dashed;
height: 100%;
}
</style>
<div id="sticky">Sticky
<div id="child">Sticky Child</div>
</div>
<div class="anchored sticky positionArea">Anchored to Sticky</div>
<div class="anchored sticky-child positionArea">Anchored to Child</div>
<div class="anchored sticky anchorFunction">Anchored to Sticky</div>
<div class="anchored sticky-child anchorFunction">Anchored to Child</div>
<script>
window.scrollBy(0, 100);
document.documentElement.removeAttribute('class');
</script>