Question

我正在尝试删除元素通过transformY移动后留下的空白区域。所以基本上在下面的代码中，我希望黄色元素位于蓝色元素的正下方，而中间没有空格。因为它是用于模板的，所以我需要在不更改上层或下层元素的代码的情况下实现这一目标。元素随元素大小的百分比一起移动。我最初的想法是添加

页边距：-50％；

，但50％是根据元素的宽度而不是高度计算的。另一个想法是使职位绝对化。但这也不起作用，因为我不知道元素的内容有多大。

您知道如何仅使用CSS来实现吗？

div {
  padding: 50px;
}

.wrapper {
  background-color: green;
  position: absolute;
  width: 500px;
  height: 500px;
}

.above {
  background-color: red;
}

.moved {
  background-color: blue;
  transform: translateY(-50%);
  
}

.below {
  background-color: yellow;
}

<div class="wrapper">
  <div class="above">
    
  </div>
  <div class="moved">
    
  </div>
  <div class="below">
    
  </div>
</div>

编辑：只是更精确一点： div代表模板的独立部分。由于这些都是可重用的组件，因此我无法编辑其他部分（上下）。因此，我正在寻找一种解决方案，其中移动的部分占用的空间与翻译后占用的空间一样。

Answer 1

由于您将这些div中的每一个的高度定义为100px，并将蓝色的高度转换为50％= 50px，因此可以添加margin-bottom: -50px;并全部设置< / p>

Answer 2

尝试在您的黄色元素上同时添加一个translateY(-50%)，这将使其向上移动以消除它和蓝色之间的空间。

.below {
  background-color: yellow;
  transform: translateY(-50px);
}

Answer 3

如果在moved和below元素中添加额外的包装器，则可以轻松实现此目的

div:not(.extra) {
  padding: 50px;
}

.wrapper {
  background-color: green;
  position: absolute;
  width: 500px;
  height: 500px;
}

.above {
  background-color: red;
}

.moved {
  background-color: blue;
}

.below {
  background-color: yellow;
  position:absolute;
  top:100%;
  left:0;
  right:0;
}

.extra {
  position:relative;
  transform: translateY(-50%);
}

<div class="wrapper">
  <div class="above">

  </div>
  <div class="extra">
    <div class="moved">

    </div>
    <div class="below">

    </div>
  </div>
</div>

补偿因变换而移动的区域：翻译

3 个答案: