CSS transform实现hover效果时元素穿透fixed定位导航栏如何解决？

问题原因 #

该穿透问题本质是CSS层叠上下文的层级顺序问题：

1. 你设置为position: fixed的header没有指定z-index属性，默认层叠优先级较低
2. 商品卡片触发hover时的transform属性会自动创建新的层叠上下文，此时它的层级会超过未设置z-index的fixed定位导航栏，就出现了穿透效果。

你之前尝试将商品卡片改为absolute定位没有效果，是因为没有同步调整两者的z-index层级关系，问题根源和定位类型无关，核心是层级优先级的差异。

解决方案 #

只需要在header的CSS规则中添加一个足够大的z-index值即可，修改后的代码如下：

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: fit-content;
  /* 新增z-index配置，值只要大于页面其他元素的z-index即可，999是通用的顶部导航层级取值 */
  z-index: 999;
}

修改后导航栏会始终处于页面最上层，不会被下方hover位移的元素穿透。

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