<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 demo { .anchor { anchor-name: --myAnchor; } .anchor-positioned { position: fixed; position-anchor: --myAnchor; position-area: right; max-width: 300px; max-height: calc(anchor-size(block) * 2); overflow: auto; position-try-fallbacks: --bottom, --top, --left; } @position-try --bottom { position-area: bottom; } @position-try --top { position-area: top; } @position-try --left { position-area: left; } } @layer demoStyles { body { flex-direction: row; } .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"));