javascript - 将 div 固定到屏幕

Question

在我的元素中，我想将一个 div 元素固定到屏幕上的特定位置。不是窗口，而是屏幕。因此，如果调整浏览器的大小，div 将保持原样，如果移动浏览器，则 d​​iv 将保持原样。可能吗？

这是我的基本 html 页面，仅在屏幕中央包含一个点。

#dot {
    width: 8px;
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #000;
    position:relative;
    left: -4px;
    top:-4px;
}

<div style="position: absolute; top: 50%; left: 50%;">
    <div id="dot"></div>
</div>

我知道我可以使用 window.screenX 和 window.screenY 然后做一些数学运算以确保位置设置为给出固定元素的错觉，但是这将需要每毫秒轮询一次窗口位置以检测浏览器何时移动(无论如何这可能非常繁重且很少见)。计划不仅仅是用一个点来做到这一点......

有什么想法吗？我完全被难住了。

Answer 1

因为 window.screenX 和 window.screenY 只能在 JS 中访问，所以除了轮询变量和使用 javascript 更改 css 之外，真的没有办法做到这一点.