如何使<div>覆盖整个页面而不仅仅是视口

Question

我正在尝试让 div 覆盖我的整个页面。目前，问题在于它仅覆盖视口的大小（例如 1920x1080px）。

这就是我目前使用的 div 的 CSS：

#cursor-container {
  position: absolute;
  z-index: 99999;
  pointer-events: none;
  overflow-x: auto;
  background-color: rgba(0, 0, 0, 0.25);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
}

目前看起来是这样的：

但它应该看起来像这样：

我该如何解决这个问题？

Answer 1

首先，确保您使用的

div

是

body

元素的子元素，然后将位置更改为

position: fixed;

：

#cursor-container {
  position: fixed;
  top: 0;
  left: 0;

  margin: 0;
  padding: 0;

  height: 100%;
  width: 100%;

  z-index: 99999;
  pointer-events: none;
  overflow-x: auto;
  background-color: rgba(0, 0, 0, 0.25);
}

这将确保您的 div 保持固定在屏幕上，即使页面向下滚动并且它将覆盖整个屏幕

另外，将父级的宽度和高度也设置为 100%：

html, body {
  width: 100%;
  height: 100%;
}