如何避免transform:scale放大时CSS动画与元素重叠？

AI 小北

2026-6-30

问题解决：图片scale动画溢出覆盖下方元素的处理

问题分析

用transform: scale()做图片放大动画时，元素会生成独立堆叠上下文，常规z-index无法跨上下文调整层级。同时图片父容器#div1未设置溢出限制，导致图片放大后超出容器范围，覆盖下方的#div2；而header处于main外部，默认堆叠顺序高于main内元素，所以图片会显示在header下方。

解决方案

给图片父容器#div1添加overflow: hidden，限制图片放大后的显示范围，避免溢出覆盖#div2
若要确保header始终在最上层，可给header设置position: relative和z-index（可选，默认顺序已满足需求）

修改后的完整代码

HTML

<header>
Header
</header>  

<main>
     <div id="div1">
        <img id="imgGrow" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/1200px-Lion_waiting_in_Namibia.jpg">
      </div>
      <div id="div2">
      1<br>2<br>3<br>4<br>5<br>6
      </div>
</main>

CSS

main {
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
}

header {
  background-color:yellow;
  padding: 20px;
  /* 可选：明确header堆叠层级，增强保障 */
  position: relative;
  z-index: 10;
}

#div1 {
  /* 核心修改：限制图片溢出范围 */
  overflow: hidden;
}

#div2 {
  height: 300px;
  background-color: blue;
  color: white;
}

#imgGrow {
  height: 100%;
  width: 100%;
  animation: imgGrow 2s ease forwards;
  object-fit: cover;
}
        
@keyframes imgGrow {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.5);
  }
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {  
  document.getElementById("div1").style.height = window.innerHeight 
   - document.querySelector("header").offsetHeight
   - document.getElementById("div2").offsetHeight
   + "px";
});