<div class="not-supported"> Your browser doesn't support this demo. It is only supported in Chrome 125+</div>
<div class="anchor">anchor</div>
<div class="target">target </div>
.anchor {
anchor-name: --my-anchor;
height: 80px;
width: 80px;
}
.target {
position: absolute;
position-anchor: --my-anchor;
position-area: top left;
height: 100%;
width: 100%;
}
/* Aesthetic Changes */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: monospace;
}
.anchor {
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: #ffbd59;
}
.target {
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: #cb6ce6;
}
.not-supported {
position: fixed;
top: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 40px;
font-weight: 600;
background-color: #ffbd59aa;
}
@supports (inset-area: top left) {
.target {
inset-area: top left;
}
}
@supports (position-area: top left) or (inset-area: top left) {
.not-supported {
display: none;
}
}
@supports not (position-area: top left) and (not (inset-area: top left)) {
.target {
height: 80px;
width: 80px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.