如何在HTML中隐藏position fixed元素后方的文本

嗨，我懂你的需求——你设置了position: fixed的元素，但它后方的文本还是会透出来（尤其是你的元素用了半透明背景时），想要把这些被覆盖的文本完全隐藏掉对吧？这里有两种实用的解决方法，你可以根据需求选择：

方式一：直接用不透明背景（最简单） #

如果不需要元素的半透明效果，直接把背景色改成完全不透明的版本，就能直接挡住后方文本：

#fixed {
  position: fixed;
  border: 1px solid blue;
  /* 把半透明rgba改成不透明rgb */
  background-color: rgb(255,200,200);
  width: 300px;
  height: 100px;
  top: 40px;
  left: 0;
  right: 0;
  /* 加上z-index确保元素在正文上方 */
  z-index: 1;
}

方式二：保留元素半透明，同时挡住后方文本 #

要是你想保留元素的半透明质感，但又不想让后面的文本透出来，可以给fixed元素加一个伪元素作为遮罩层，放在元素下方但正文上方：

#fixed {
  position: fixed;
  border: 1px solid blue;
  background-color: rgba(255,200,200,0.5);
  width: 300px;
  height: 100px;
  top: 40px;
  left: 0;
  right: 0;
  /* 让父元素成为定位上下文，方便伪元素定位 */
  position: relative;
  z-index: 1;
}

/* 新增伪元素作为不透明遮罩 */
#fixed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 用完全不透明的同色系背景挡住后方文本 */
  background-color: rgb(255,200,200);
  /* 让遮罩层在父元素下方，不影响父元素的半透明视觉 */
  z-index: -1;
}

这个方法的原理是：伪元素会完全覆盖fixed元素的区域，挡住后面的文本，而父元素的半透明背景会显示在遮罩层上方，既保留了半透明质感，又不会让后方文本透出来。

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