页面滚动时带透明度的div遮挡fixed定位div的技术问题

嘿，这个问题我之前也踩过坑！核心原因和CSS的堆叠上下文有关：当给元素设置opacity值小于1时，会自动创建一个新的堆叠上下文。你的导航虽然是position: fixed（本身也会创建堆叠上下文），但因为没显式设置z-index，层级上就被带opacity的#d2给压下去了。

解决方法超简单，只需要给固定导航加一个足够高的z-index值，让它始终悬浮在其他元素之上就行。修改后的完整代码如下：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#navigation {
  position: fixed;
  background-color: green;
  width: 100%;
  height: 80px;
  overflow: visible;
  z-index: 999; /* 新增这行，确保导航层级最高 */
} 
#d1 {
  background-color: pink;
  width: 80%;
  height:600px; 
} 
#d2 {
  background-color: yellow;
  width: 80%;
  height: 600px;
  opacity: 0.9;
} 
</style> 
</head> 
<body> 
<div id="navigation"> 
<h3>NAVIGATION MENU AREA</h3> 
</div> 
<div id="d1"> 
<br><br><br><br> 
<h3>OPA...</h3></div><div id="d2"></div></body></html>

为啥这招管用？因为z-index控制着元素在堆叠上下文中的显示优先级。给固定导航设一个较高的z-index（比如999，数值只要比其他元素的堆叠层级高就行，不用非得是999），就能确保它不会被任何带opacity、transform或者其他会触发堆叠上下文的元素遮挡。

顺带提一句，除了opacity，像transform、filter、perspective这些属性也会触发新的堆叠上下文，以后碰到类似遮挡问题，都可以用调整z-index的思路来解决。

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