如何使 <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%;
}

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

How to make <div> cover whole page and not only viewport

html

css

overlay

cover

viewport