如何让header固定在顶部且层级最高？解决sticky属性及透明度问题

1. 关于同时设置position: relative和position: sticky #

CSS的position是单值属性，无法同时指定多个定位值。sticky本身就是relative与fixed的混合定位规则：元素在视口范围内时表现为relative特性，滚动超出视口后自动切换为fixed固定定位。因此不需要额外设置position: relative，sticky已经包含了relative的行为逻辑。

2. 解决header出现透明度的问题 #

你的代码中background-color是纯色#007eb6，本身不会产生透明效果，视觉上的透明感通常由以下原因导致：

• 父元素继承透明：检查header的父容器，若父元素设置了opacity: 小于1的数值，会导致子元素继承该透明属性。
• 层级重叠视觉错觉：header的z-index值过低，被其他滚动元素（如页面主体内容、横幅区域）部分遮挡，看起来像透明。可给header添加z-index: 999提升层级。
• 浏览器渲染异常：极少数情况浏览器对sticky元素的渲染存在bug，可尝试添加transform: translateZ(0)触发硬件加速，修复渲染问题。

修改后的示例代码：

.header {
  height: 80px;
  padding: 0;
  background-color: #007eb6;
  position: sticky;
  top: 0;
  z-index: 999; /* 解决层级遮挡问题 */
  /* 若存在渲染异常，可启用下面一行 */
  /* transform: translateZ(0); */
}

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