Positionnement par ancre CSS – anchor-size
HTML
index.html <div>
<button class="open anchor" autofocus><span>⚓︎</span></button>
<article class="anchor-positioned">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure earum, exercitationem quasi mollitia natus sequi voluptas, placeat animi quisquam fuga quae. Maiores molestias totam magni dolor veniam. Quis, veniam eius? Maiores molestias totam magni dolor veniam. Quis, veniam eius?Maiores molestias totam magni dolor veniam. Quis, veniam eius?
</article>
</div>
CSS
style.css @layer demo {
.anchor {
anchor-name: --myAnchor;
}
.anchor-positioned {
position: fixed;
position-anchor: --myAnchor;
position-area: right;
max-width: 300px;
max-height: calc(anchor-size(block) * 2);
overflow: auto;
}
}
@layer demoStyles {
body {
flex-direction: row;
}
.open {
width: 62px;
height: 62px;
cursor: pointer;
border: 1px solid #15181a;
background: #33393e;
border-radius: 100%;
background: no-repeat center center,
-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3c4349), color-stop(100%, #252a2d));
box-shadow: 0px -3px 2px 0px #212428 inset, 0px 2px 2px #535d65 inset,
0px 2px 2px -1px #050606, 0px 7px 4px -1px #1a1d1f;
&:hover {
background: #33393e;
background: no-repeat center center,
-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #252a2d), color-stop(100%, #3c4349));
box-shadow: 0px -3px 2px 0px #212428 inset, 0px 2px 2px #535d65 inset,
0px 2px 2px -1px #050606, 0px 7px 4px -1px #1a1d1f;
& span {
background-image: -webkit-linear-gradient(
90deg,
rgba(255, 145, 0, 1) 0%,
rgba(255, 214, 1, 1) 100%
);
}
}
&:focus {
outline: 3px solid cyan;
}
& span {
font-size: 2rem;
color: transparent;
background: white;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(2px 2px 5px #000);
}
}
.anchor-positioned {
background-color: white;
padding: 1rem;
border-radius: 15px;
}
}