div动画展开引发相邻div移位问题排查与矩形绘制代码优化求助

我懂你遇到的这个麻烦——当line2执行sketchBottom动画向下展开时，它把下面的line3和line4都挤下去了，这其实是块级元素的默认行为在搞鬼：默认情况下，div元素会占据文档流的空间，当你通过动画改变它的高度时，它会“撑大”自己的占位区域，自然就把后面的元素挤走了。

要解决这个问题，核心思路是让所有线条脱离文档流，这样它们的尺寸变化就不会互相影响。最直接的方法就是把原来的position: relative改成position: absolute，然后给每个线条设置明确的初始位置，确保它们对应矩形的四个边：

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #042d6b; }
#line1, #line2, #line3, #line4 { 
  height: 2px; 
  width: 2px; 
  background: #a2facf; 
  position: absolute; /* 改成绝对定位，脱离文档流 */
  border: red solid; 
}
#line1 { 
  top: 0; 
  left: 0; 
  animation: sketchRight 3s forwards; 
}
#line2 { 
  top: 0; 
  left: 200px; /* 初始在右上角 */
  animation: sketchBottom 3s forwards; 
}
#line3 { 
  top: 0; 
  left: 0; /* 初始在左上角 */
  animation: sketchBottom 3s forwards; 
}
#line4 { 
  top: 200px; /* 初始在左下角 */
  left: 0; 
  animation: sketchRight 3s forwards; 
}
@keyframes sketchRight { 
  100% { width: 200px; height: 2px} 
}
@keyframes sketchBottom { 
  100% { width: 2px; height: 200px} 
}
</style>
</head>
<body>
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
</body>
</html>

关键改动说明 #

• 将所有线条的position: relative替换为position: absolute：绝对定位的元素会完全脱离文档流，它们的位置和尺寸变化不会影响其他元素的布局。
• 给每个线条添加top和left属性，明确它们的初始位置：这样四个线条分别对应矩形的顶边、右边、左边和底边，动画执行时就会画出完整的矩形，不会互相干扰。
• 去掉了line4的注释，设置top: 200px让它从左下角开始向右延伸，完美闭合矩形。

这样调整后，你再运行代码，就会发现线条动画时不会再挤动其他元素了，矩形能顺利绘制出来~

内容的提问来源于stack exchange，提问作者Artur Müller Romanov