Простая проблема с контекстом HTML z-index при перетаскивании div с помощью javascript ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект «окна просмотра», позволяющий перетаскивать элемент div по экрану. Я хочу, чтобы элементы управления располагались вверху, но у меня возникают проблемы с перемещением перетаскиваемого содержимого по элементу управления.
Я осмотрелся и нашел следующие статьи, которые многое объясняют, но я тупой.
https://www.w3.org/TR/CSS2/zindex.html
https://philipwalton.com/articles/what- ... ou-about-z -index/
У меня есть код из сети, демонстрирующий проблему. Я хочу, чтобы зеленый прямоугольник «перемещался под» другим элементом содержимого (с идентификатором «message»).

Код: Выделить всё

const content = document.getElementById('content');
const message = document.getElementById('message');
let isDragging = false;
let startX, startY, initialX, initialY;

content.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
initialX = content.offsetLeft;
initialY = content.offsetTop;
content.style.cursor = 'grabbing';
message.innerHTML = "Mousedown, initial X: " + initialX + ",  initialY: " + initialX;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const currentX = e.clientX;
const currentY = e.clientY;
const dx = currentX - startX;
const dy = currentY - startY;
content.style.left = `${initialX + dx}px`;
content.style.top = `${initialY + dy}px`;
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
content.style.cursor = 'grab';
});
// Prevent text selection while dragging
content.addEventListener('mousedown', (e) => {
e.preventDefault();
});

Код: Выделить всё

#draggable {
position: relative;
margin: 0;
padding: 0;
height: 76vh;
display: flex;
justify-content: center;
align-items: center;
border: 1px inset;
}

#viewport {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

#content {
position: absolute;
width: 200px;
height: 150px;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: grab;
user-select: none;
/* Prevent text selection */
background-color: green;
opacity: .99;
}

Код: Выделить всё

Other content





DRAG ME

Это простое исправление, которого я просто не вижу?



Это простое исправление, которого я просто не вижу?



Это простое исправление, которого я просто не вижу?



Это простое исправление, которого я просто не вижу?



Это простое исправление, которое я просто не вижу? p>
Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/786 ... javascript