如何让div元素覆盖完整页面而非仅可视视口

问题原因 #

你当前使用position: absolute定位时，元素的百分比宽高仅继承自最近的非static定位父元素。如果页面实际内容高度超过可视视口，height: 100%只能匹配可视视口尺寸，滚动后超出部分就不会被覆盖。

解决方案 #

根据你的需求选择对应方案即可： #

方案1：浮层固定在视口，滚动页面时浮层保持不动

适合需要遮罩始终出现在用户视野内的场景，只需把定位属性从absolute改为fixed，同时可简化冗余属性：

#cursor-container {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.25);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

fixed定位默认相对于浏览器视口，设置四个方向定位为0即可自动撑满整个视口，不需要额外声明宽高，也可以删除无用的overflow-x: auto属性。 #

方案2：浮层覆盖整个文档内容，跟随页面滚动

适合需要遮罩和页面内容绑定、滚动时一起移动的场景，需要修改两处代码：

1. 先给根元素设置定位参照，确保高度适配整个文档：

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  position: relative;
}

2. 修改目标div的高度属性：

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

用min-height替换原有的height: 100%，确保内容超过一屏时也能自适应拉伸高度。

内容的提问来源于stack exchange，提问作者Marco