<div>
  <button class="open anchor" autofocus><span>⚓︎</span></button>

  <article class="anchor-positioned">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure earum, exercitationem quasi mollitia natus sequi voluptas, placeat animi quisquam fuga quae.
  </article>
</div>

@layer base, demo;

@layer demo {
  .anchor {
    anchor-name: --myAnchor;
  }
  .anchor-positioned {
    position: fixed;
    position-anchor: --myAnchor;
    inset-area: right;
    max-width: 300px;
    max-height: calc(anchor-size(block) * 2);
    overflow: auto;
    position-try-fallbacks: --bottom, --top, --left;
    position-try-options: --bottom, --top, --left;
  }
  @position-try --bottom {
    inset-area: bottom;
  }
  @position-try --top {
    inset-area: top;
  }
  @position-try --left {
    inset-area: left;
  }
}

@layer base {
  body {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto,
      Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    display: flex;
    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;
  }

  .open {
    position: absolute;
    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);
    }

    &:hover {
      cursor: grab;
    }
    &:active {
      cursor: grabbing;
    }
  }

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

function makeDraggable(element) {
  // Make an element draggable (or if it has a .window-top class, drag based on the .window-top element)
  let currentPosX = 0,
    currentPosY = 0,
    previousPosX = 0,
    previousPosY = 0;

  // If there is a window-top classed element, attach to that element instead of full window
  if (element.querySelector(".window-top")) {
    // If present, the window-top element is where you move the parent element from
    element.querySelector(".window-top").onmousedown = dragMouseDown;
  } else {
    // Otherwise, move the element itself
    element.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    // Prevent any default action on this element (you can remove if you need this element to perform its default action)
    e.preventDefault();
    // Get the mouse cursor position and set the initial previous positions to begin
    previousPosX = e.clientX;
    previousPosY = e.clientY;
    // When the mouse is let go, call the closing event
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    // Prevent any default action on this element (you can remove if you need this element to perform its default action)
    e.preventDefault();
    // Calculate the new cursor position by using the previous x and y positions of the mouse
    currentPosX = previousPosX - e.clientX;
    currentPosY = previousPosY - e.clientY;
    // Replace the previous positions with the new x and y positions of the mouse
    previousPosX = e.clientX;
    previousPosY = e.clientY;
    // Set the element's new position
    element.style.top = element.offsetTop - currentPosY + "px";
    element.style.left = element.offsetLeft - currentPosX + "px";
  }

  function closeDragElement() {
    // Stop moving when mouse button is released and release events
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

makeDraggable(document.querySelector(".anchor"));