<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;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.