<div class="anchor">
<p>⚓︎</p>
</div>
<div class="anchored-notice">
<p>I am a positioned element that is tethered to the top of the <code>anchor</code> at my bottom using <code>position-area</code>.<p>
</div>
/* The demo */
.anchor {
anchor-name: --anchor-el;
}
.anchored-notice {
position: absolute;
/* Anchor reference */
position-anchor: --anchor-el;
/* Position bottom of anchored elem at top center of anchor */
position-area: top;
}
/* Misc styling */
.anchor {
background: linear-gradient(45deg, blueviolet, blue);
font-size: 2rem;
display: grid;
place-items: center;
border-radius: 100%;
aspect-ratio: 1 / 1;
width: 3.5rem;
line-height: 0;
margin-top: 40dvh;
p {
filter: brightness(2);
}
}
.anchored-notice {
font-family: system-ui, sans-serif;
background: #333;
border-radius: 0.75rem;
color: white;
padding: 1rem;
max-width: 250px;
line-height: 1.5;
}
code {
font-family: monospace;
background: dimgray;
padding: 0.25rem;
border-radius: 0.25rem;
border: 1px solid gray;
}
body {
display: grid;
grid-template-rows: 1fr;
justify-content: center;
height: 100vh;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.