<div class="anchor">Anchor</div>
<div class="element">Element</div>

body {
  width: 150%;
  height: 150vh;
}

.anchor {
  display: inline-block; 
  padding: 6px;
  background-color: #B9314F;
  color: #FFF;
  width: 30%;
  height: 30%;
  margin: 35%;
  
  /* アンカー名 */
  anchor-name: --anchor;
}

.element {
  display: inline-block; 
  padding: 16px;
  background-color: #3E8A74;
  color: #FFF;
  position-anchor: --anchor;
  position: absolute;
  position-try-options: --default, --fallback-1, --fallback-2, --fallback-3;
}

@position-try --default {
  bottom: calc(anchor(top) + 10px);
  right: anchor(left);
}

@position-try --fallback-1 {
  top: calc(anchor(bottom) + 10px);
  right: anchor(left);
}

@position-try --fallback-2 {
  bottom: calc(anchor(top) + 10px);
  left: anchor(right);
}

@position-try --fallback-3 {
  top: calc(anchor(bottom) + 10px);
  left: anchor(right);
}