Positionnement par ancre CSS – position-visibility
HTML
index.html <form>
<fieldset>
<legend>Choose position visibility</legend>
<div>
<label for="radio-always">always</label>
<input type="radio" id="radio-always" name="position-visibility" value="always" />
</div>
<div>
<label for="radio-anchors-visible">anchors-visible</label>
<input type="radio" id="radio-anchors-visible" name="position-visibility" value="anchors-visible" />
</div>
<div>
<label for="radio-no-overflow">no-overflow</label>
<input type="radio" id="radio-no-overflow" name="position-visibility" value="no-overflow" checked />
</div>
</fieldset>
</form>
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugit, aliquid fugiat repellat quidem inventore ad, temporibus eum magnam vitae ullam excepturi. Magnam unde, eligendi optio perspiciatis pariatur facilis eveniet?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugit, aliquid fugiat repellat quidem inventore ad, temporibus eum magnam vitae ullam excepturi. Magnam unde, eligendi optio perspiciatis pariatur facilis eveniet?</p>
<button class="open anchor" autofocus><span>⚓︎</span></button>
<article class="anchor-positioned">
Lorem ipsum dolor sit amet
</article>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugit, aliquid fugiat repellat quidem inventore ad, temporibus eum magnam vitae ullam excepturi. Magnam unde, eligendi optio perspiciatis pariatur facilis eveniet?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugit, aliquid fugiat repellat quidem inventore ad, temporibus eum magnam vitae ullam excepturi. Magnam unde, eligendi optio perspiciatis pariatur facilis eveniet?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugit, aliquid fugiat repellat quidem inventore ad, temporibus eum magnam vitae ullam excepturi. Magnam unde, eligendi optio perspiciatis pariatur facilis eveniet?</p>
</div>
CSS
style.css @layer demo {
.anchor {
anchor-name: --myAnchor;
}
.anchor-positioned {
position: absolute;
position-anchor: --myAnchor;
justify-self: anchor-center;
top: anchor(--myAnchor bottom);
width: 200px;
position-visibility: no-overflow;
}
}
@layer demoStyles {
form {
color: white;
fieldset {
padding: 1rem;
}
}
.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;
}
.container {
width: 400px;
height: 300px;
overflow-y: scroll;
border: 1px dashed white;
padding: 1rem;
text-align: center;
> p {
color: white;
margin-block: 1rem;
}
}
}
JavaScript
script.js const infobox = document.querySelector(".anchor-positioned");
const radios = document.querySelectorAll('[name="position-visibility"]');
for (const radio of radios) {
radio.addEventListener("change", setPositionVisibility);
}
function setPositionVisibility(e) {
infobox.style.positionVisibility = e.target.value;
}