使用CSS transform位移元素后如何消除与后续元素之间的多余空白？

问题原因 #

transform 是纯视觉渲染属性，仅调整元素的显示位置，不会改变元素在常规文档流中的原始占位空间。你将高度为200px的.div2向上位移了20%（也就是40px），它在文档流中原本占据的200px高度空间仍然保留，因此和后续的h1之间就会出现高度为40px的多余空白。

可行解决方案 #

方案1：添加负margin抵消占位（改动最少）

直接给.div2添加对应位移距离的负下外边距，抵消它多占的文档流空间即可，修改后的CSS如下：

.div1,
.div2 {
  height: 200px;
}

.div1 {
  background-color: aqua;
  width: 200px
}

.div2 {
  width: 190px;
  transform: translateY(-20%);
  background-color: purple;
  z-index: 10;
  /* 新增：抵消向上位移的40px高度 */
  margin-bottom: -40px;
}

如果需要适配动态高度，可以把-40px改成-20%，和位移的百分比保持一致即可。

方案2：用定位实现叠层（完全消除额外占位）

如果后续还会调整叠层逻辑，推荐把两个div包在同一个父容器内，用绝对定位实现叠层，完全避免位移带来的文档流占位问题：

/* 新增父容器样式 */
.container {
  position: relative;
}
.div1,
.div2 {
  height: 200px;
}

.div1 {
  background-color: aqua;
  width: 200px
}

.div2 {
  width: 190px;
  /* 替换transform为绝对定位偏移 */
  position: absolute;
  top: -40px;
  background-color: purple;
  z-index: 10;
}

对应的HTML修改为：

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>
<h1>Hello</h1>

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