如何实现图片hover时放大并置于其他图片上层？

你之前设置z-index:1没效果的核心原因是：所有图片都加了position:relative和z-index:0，它们处于同一堆叠上下文层级，hover时仅把z-index调到1，优先级提升幅度不够；再加上scale变换会创建局部堆叠上下文，导致层级无法突破兄弟元素。

直接用下面的代码就能解决问题：

img {
  scale: 100%;
  position: relative;
  transition: scale 0.3s; /* 可选：添加过渡让缩放效果更顺滑 */
}

img:hover {
  scale: 200%;
  z-index: 999; /* 用足够高的数值确保覆盖其他所有图片 */
}

额外注意事项 #

• 不要给图片的父容器设置position:relative、z-index、opacity这类会创建堆叠上下文的属性，否则hover的图片层级会被限制在父容器内部，无法突破到最上层。
• 如果图片放在网格/弹性布局容器中，检查容器是否设置了overflow:hidden，有的话需要移除，否则放大的图片部分会被容器裁剪。
• 别再犯之前在HTML标签里写position="relative"这种语法错误，样式要统一写在CSS代码中。

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