It's very useful when we want to place some positioned elements associated with a specific viewport segment.
@media (horizontal-viewport-segments: 1) {
html {
anchor-name: --viewport-0-0;
}
}
@media (horizontal-viewport-segments: 2) {
::viewport(0, 0) {
anchor-name: --viewport-0-0;
}
}
.taskbar {
position: absolute;
position-anchor: --viewport-0-0;
top: 10px;
justify-self: safe anchor-center;
}