Positionnement par ancre CSS
Positionnement par ancre CSS
HTML
index.html <div class="anchor-stage">
<button class="open anchor" type="button" aria-label="Afficher l’élément ancré">
<span aria-hidden="true">⚓︎</span>
</button>
<article class="anchor-positioned">
Lorem ipsum dolor sit amet
</article>
</div>
CSS
style.css @layer demo {
.anchor {
anchor-name: --myAnchor;
}
.anchor-positioned {
position: fixed;
position-anchor: --myAnchor;
top: anchor(bottom);
justify-self: anchor-center;
background-color: white;
padding: 1rem;
border-radius: 15px;
}
.open {
width: 62px;
height: 62px;
margin: 80px auto;
color: #fff;
cursor: pointer;
background: linear-gradient(180deg, #3c4349, #252a2d);
border: 1px solid #15181a;
border-radius: 100%;
box-shadow:
0 -3px 2px #212428 inset,
0 2px 2px #535d65 inset,
0 2px 2px -1px #050606,
0 7px 4px -1px #1a1d1f;
&:hover {
background: linear-gradient(180deg, #252a2d, #3c4349);
span {
background-image: linear-gradient(90deg, #ff9100, #ffd601);
}
}
&:focus-visible {
outline: 3px solid #00ffff;
outline-offset: 3px;
}
span {
font-size: 2rem;
color: transparent;
background: #fff;
background-clip: text;
background-size: cover;
filter: drop-shadow(2px 2px 5px #000);
-webkit-text-fill-color: transparent;
}
}
}