<div class="anchor">
  <svg viewBox="0 0 576 512" title="anchor">
    <path d="M12.971 352h32.394C67.172 454.735 181.944 512 288 512c106.229 0 220.853-57.38 242.635-160h32.394c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0l-67.029 67.029c-7.56 7.56-2.206 20.485 8.485 20.485h35.146c-20.29 54.317-84.963 86.588-144.117 94.015V256h52c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-52v-5.47c37.281-13.178 63.995-48.725 64-90.518C384.005 43.772 341.605.738 289.37.01 235.723-.739 192 42.525 192 96c0 41.798 26.716 77.35 64 90.53V192h-52c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h52v190.015c-58.936-7.399-123.82-39.679-144.117-94.015h35.146c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0L4.485 331.515C-3.074 339.074 2.28 352 12.971 352zM288 64c17.645 0 32 14.355 32 32s-14.355 32-32 32-32-14.355-32-32 14.355-32 32-32z" />
  </svg>

</div>
<div class="anchored">In this example, the anchor has an offset, to demonstrate position-try-order choosing the option with the most width available.</div>
<fieldset class="controls">
  <legend>Position anchor:</legend>
  <div class="grid">
    <label><input type="radio" name="position" class="top left" /><span class="sr-only">top left</span></label>
    <label><input type="radio" name="position" class="top center" /><span class="sr-only">top center</span></label>
    <label><input type="radio" name="position" class="top right" /><span class="sr-only">top righ</span></label>
    <label><input type="radio" name="position" class="left" /><span class="sr-only">left</span></label>
    <label><input type="radio" name="position" class="center" checked /><span class="sr-only">center</span></label>
    <label><input type="radio" name="position" class="right" /><span class="sr-only">right</span></label>
    <label><input type="radio" name="position" class="bottom left" /><span class="sr-only">bottom left</span></label>
    <label><input type="radio" name="position" class="bottom center" /><span class="sr-only">bottom center</span></label>
    <label><input type="radio" name="position" class="bottom right" /><span class="sr-only">bottom right</span></label>
  </div>
</fieldset>

body {
  display: flex;
  flex-direction: column;
  align-items: var(--align, center);
  justify-content: var(--justify, center);
  min-height: 100vh;
}

.anchor {
  height: 20vmin;
}

.anchor {
  background: goldenrod;
  anchor-name: --anchortome;
  margin-left: 20vw;
  aspect-ratio: 1;
}

.anchored {
  position: absolute;
  padding: 20px;
  position-anchor: --anchortome;
  top: anchor(top);
  bottom: anchor(bottom);
  left: anchor(right);
  align-self: stretch;
  position-try: most-width --hold-left;
  overflow: auto;
  background: olive;
}

@position-try --hold-left {
  top: anchor(top);
  bottom: anchor(bottom);
  right: anchor(left);
  left: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #dedede;
  background-image: linear-gradient(
      45deg,
      transparent 24%,
      #ccc 25%,
      transparent 26%,
      transparent 74%,
      #ccc 75%,
      transparent 76%
    ),
    linear-gradient(
      -45deg,
      transparent 24%,
      #ccc 25%,
      transparent 26%,
      transparent 74%,
      #ccc 75%,
      transparent 76%
    );
  background-size: 3vw 3vw;
}

.controls {
  position: fixed;
  bottom: 20vh;
  margin: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

svg {
  fill: darkgoldenrod;
  margin: 4vmin;
}

label,
input {
  width: 1.5rem;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
}

input[type="radio"] {
  accent-color: olivedrab;
  cursor: pointer;
}

body:has(.left:checked) {
  --align: start;
}

body:has(.right:checked) {
  --align: end;
}

body:has(.center:checked) {
  --justify: center;
}

body:has(.top:checked) {
  --justify: start;
}

body:has(.bottom:checked) {
  --justify: end;
}

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}