<button class="open anchor anchor1">Anchor 1</button>
<button class="open anchor anchor2">Anchor 2</button>
<article class="anchor-positioned top-left">
  anchor-positioned
</article>

@layer base, demo;

@layer demo {
  .anchor {
    position: absolute;
  }
  .anchor1 {
    anchor-name: --anchor1;
  }
  .anchor2 {
    anchor-name: --anchor2;
    bottom: 0;
    right: 0;
  }
  .anchor-positioned {
    position: absolute;
    top: anchor(--anchor1 bottom);
    left: anchor(--anchor1 right);
    right: anchor(--anchor2 left);
    bottom: anchor(--anchor2 top);
    display: grid;
    place-items: center;
  }
}

@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 {
    padding: 1rem;
    background: orange;
    width: 100px;
    height: 100px;
    border: 1px white dashed;
  }

  .anchor-positioned {
    background-color: rgba(0, 255, 255, 0.8);
    padding: 1rem;
    position: relative;
    border: dashed 1px white;
    &::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 100vmax;
      background-color: red;
    }
    &.top-left::after {
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
    }
  }
}

// You can choose to have an element with the class "window-top" inside of your draggable window that will act as the "handle" for the window or it will attach to the element itself

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

// Make myWindow and myWindow2 draggable in different ways...

// myWindow will only be able to be moved via the top bar (.window-top element). The main element does nothing on mouse down.
makeDraggable(document.querySelector(".anchor1"));

// myWindow2 will be able to moved by grabbing the entire element
makeDraggable(document.querySelector(".anchor2"));