使用transform缩放悬停图片时覆盖sticky导航块如何解决

实现图片悬停放大效果时，使用CSS代码img:hover {transform: scale(1.1)}实现交互，运行后发现放大的图片会覆盖设置了sticky定位的nav导航块，需要让图片始终显示在sticky导航块下方，不出现覆盖问题。

当元素设置了值不为none的transform属性时，浏览器会为该元素生成新的独立层叠上下文，默认层叠顺序会高于未显式设置z-index的sticky定位元素，最终导致悬停放大的图片盖住导航栏。

• 直接给sticky定位的nav导航元素设置更高的层叠等级，添加z-index属性即可，参考代码：

nav {
  position: sticky;
  top: 0;
  /* 数值只要大于普通内容区块的层级即可，可根据实际项目调整 */
  z-index: 10;
}

• 原有图片悬停放大的transform代码不需要修改，也不建议给图片或图片的父容器设置过高的z-index，避免出现层级混乱。

注意：如果添加z-index后仍然存在覆盖问题，检查图片的祖先元素有没有设置过高的z-index值，保证导航元素所在的层叠上下文层级高于图片所在的层叠上下文即可。

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