Positionnement par ancre CSS – position-try
HTML
index.html <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>
CSS
style.css @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;
}
}
JavaScript
script.js 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"));