CSS position:sticky粘性元素滚动穿透其他元素显透明的解决方法

你遇到的不是透明度问题，而是元素堆叠层级的问题——你的nav-menu元素z-index层级低于下方的li元素，滚动时被li覆盖，视觉上看起来像是“透明”了，设置opacity:1自然没用。

解决办法很直接：

• 给nav-menu设置足够高的z-index值，确保它在堆叠顺序中位于li元素之上：

.nav-menu {
  width: 400px;
  height: 62px;
  left: 0px;
  top: 0px;
  position: sticky;
  background-color: #0c5061;
  z-index: 999; /* 调整这个值，只要比li元素的z-index高即可 */
}

如果设置z-index后问题仍存在，检查以下两点：

1. 检查nav-menu的父元素是否设置了transform、filter或perspective属性——这些属性会创建新的堆叠上下文，导致子元素的z-index仅在该上下文内生效，无法覆盖外部元素。如果有这类属性，要么移除，要么调整父元素的堆叠层级。
2. 确认li元素是否设置了position（如relative/absolute）和z-index，如果有的话，确保nav-menu的z-index数值比它们更高。

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