如何使CSS类dark-layer固定铺满视口并始终覆盖背景？

嘿，我太懂你这种折腾半天没结果的郁闷了——翻了一堆问答和示例，试了height:100%、position:absolute甚至background-attachment:fixed，结果要么内容少的时候遮罩铺不满屏幕，要么内容溢出滚动时遮罩又跟不上，对吧？

问题出在这几个核心点上：

• 单纯的height:100%是相对于父元素的高度，如果父元素（比如body）没明确设置高度，它只会跟着页面内容的高度走，内容少自然就铺不满视口
• position:absolute是相对于最近的定位父元素，当页面内容超出视口滚动时，这个元素不会跟着视口走，只会停留在父元素的范围内
• background-attachment:fixed只对元素的背景图生效，对元素本身的定位没有任何影响，所以你试了也没用

给你个亲测有效的解决方案，直接修改你的CSS类就行：

.dark-layer {
  background-color: rgba(0,0,0,.6);
  /* 核心：固定定位，完全基于浏览器视口 */
  position: fixed;
  /* 让四个边完全贴紧视口的四个角落 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 可选：控制遮罩的层级，比如要在内容下方就设为-1，要在上方就设999这类大数值 */
  z-index: -1;
}

为什么这个能解决问题？
position:fixed的元素是完全相对于浏览器的视口定位的，不管页面怎么滚动，它都会牢牢占满整个当前视口的空间，完美实现你要的“像body背景图那样始终覆盖整个屏幕”的效果。

额外提醒两个小坑：

• 如果你的遮罩要显示在页面内容的上方，记得把z-index设得比内容元素的z-index高，不然会被内容盖住
• 如果遮罩的父元素设置了transform属性，position:fixed会失效（这是CSS的规则），如果遇到这种情况，把遮罩元素移到没有transform的父元素下就行

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