<form>
  <fieldset>
    <legend>Choose position visibility</legend>
    <div>
      <label for="radio-always">always</label>
      <input type="radio" id="radio-always" name="position-visibility" value="always" />
    </div>
    <div>
      <label for="radio-anchors-visible">anchors-visible</label>
      <input type="radio" id="radio-anchors-visible" name="position-visibility" value="anchors-visible" />
    </div>
    <div>
      <label for="radio-no-overflow">no-overflow</label>
      <input type="radio" id="radio-no-overflow" name="position-visibility" value="no-overflow" checked />
    </div>
  </fieldset>
</form>
<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugit, aliquid fugiat repellat quidem inventore ad, temporibus eum magnam vitae ullam excepturi. Magnam unde, eligendi optio perspiciatis pariatur facilis eveniet?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugit, aliquid fugiat repellat quidem inventore ad, temporibus eum magnam vitae ullam excepturi. Magnam unde, eligendi optio perspiciatis pariatur facilis eveniet?</p>
  <button class="open anchor" autofocus><span>⚓︎</span></button>

  <article class="anchor-positioned">
    Lorem ipsum dolor sit amet
  </article>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugit, aliquid fugiat repellat quidem inventore ad, temporibus eum magnam vitae ullam excepturi. Magnam unde, eligendi optio perspiciatis pariatur facilis eveniet?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugit, aliquid fugiat repellat quidem inventore ad, temporibus eum magnam vitae ullam excepturi. Magnam unde, eligendi optio perspiciatis pariatur facilis eveniet?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugit, aliquid fugiat repellat quidem inventore ad, temporibus eum magnam vitae ullam excepturi. Magnam unde, eligendi optio perspiciatis pariatur facilis eveniet?</p>
</div>

@layer base, demo;

@layer demo {
  .anchor {
    anchor-name: --myAnchor;
  }
  .anchor-positioned {
    position: absolute;
    position-anchor: --myAnchor;
    justify-self: anchor-center;
    top: anchor(--myAnchor bottom);
    width: 200px;
    position-visibility: no-overflow;
  }
}

@layer base {
  body {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto,
      Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    background: hsl(0 0% 6%);
    gap: 2rem;
  }

  body::before {
    --line: hsl(0 0% 95% / 0.35);
    content: "";
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin)
        0 -5vmin / 10vmin 10vmin,
      linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin
        10vmin;
    mask: radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 70%
    );
    top: 0;
    z-index: -1;
  }

  *:not(dialog) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  form {
    color: white;
    fieldset {
      padding: 1rem;
    }
  }

  .open {
    width: 62px;
    height: 62px;
    cursor: pointer;
    border: 1px solid #15181a;
    background: #33393e;
    border-radius: 100%;
    background: no-repeat center center,
      -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3c4349), color-stop(100%, #252a2d));
    box-shadow: 0px -3px 2px 0px #212428 inset, 0px 2px 2px #535d65 inset,
      0px 2px 2px -1px #050606, 0px 7px 4px -1px #1a1d1f;
    &:hover {
      background: #33393e;
      background: no-repeat center center,
        -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #252a2d), color-stop(100%, #3c4349));
      box-shadow: 0px -3px 2px 0px #212428 inset, 0px 2px 2px #535d65 inset,
        0px 2px 2px -1px #050606, 0px 7px 4px -1px #1a1d1f;
      & span {
        background-image: -webkit-linear-gradient(
          90deg,
          rgba(255, 145, 0, 1) 0%,
          rgba(255, 214, 1, 1) 100%
        );
      }
    }
    &:focus {
      outline: 3px solid cyan;
    }
    & span {
      font-size: 2rem;
      color: transparent;
      background: white;
      background-size: cover;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(2px 2px 5px #000);
    }
  }

  .anchor-positioned {
    background-color: white;
    padding: 1rem;
    border-radius: 15px;
  }

  .container {
    width: 400px;
    height: 300px;
    position: relative;
    overflow-y: scroll;
    border: 1px dashed white;
    padding: 1rem;
    text-align: center;
    > p {
      color: white;
      margin-block: 1rem;
    }
  }
}

const infobox = document.querySelector(".anchor-positioned");
const radios = document.querySelectorAll('[name="position-visibility"]');

for (const radio of radios) {
  radio.addEventListener("change", setPositionVisibility);
}

function setPositionVisibility(e) {
  infobox.style.positionVisibility = e.target.value;
}