CSS转换、推/拉周围元素

我正在使用

translateY（）

向上拉一个元素，使其与上面的元素重叠

.element {
  transform: translateY(-50%);
}

它给底部留下了空间。有没有办法把下面的元素拉上来

在本例中，您可以看到它与顶部的元素重叠，这是我想要的，但在底部留下了空间。我试图在不修改其他元素的情况下实现这一点（例如，在底部的元素上使用transform）

---

注意：使用边距-50%不起作用，因为它不会将元素相对于元素高度的50%调高。只有变换才能计算出我所知道的高度

使用

页边距顶部：-50%取而代之。快乐编码
您可以使用下面的css对底部的元素应用转换。我希望这就是您要寻找的


.element~div{
转化：translateY（-50%）；
}
您可以使用方框阴影属性来解决问题，否则您可以使用弹性方框或位置等。无论如何，我给出了解决方案，但我不确定您是否想要这些东西：）


正文{
文本对齐：居中；
}
.测试，.元素{
宽度：80%；
填充：60px0；
背景：绿色；
显示：内联块；
}
.元素{
宽度：30%；
背景：黄色；
显示：内联块；
转化：translateY（-50%）；
盒影：0px 100px黄色；
}

:-)
您可以在
页边距底部使用一个大负值来拉动其他元素：


正文{
文本对齐：居中；
}
.测试，.元素{
宽度：80%；
填充：60px0；
背景：绿色；
显示：内联块；
}
.元素{
宽度：30%；
背景：黄色；
显示：内联块；
转化：translateY（-50%）；
边缘底部：-100vh；
}

:-)



Margin top不会使元素垂直居中，因为它在定位时是相对于宽度而不是高度计算的-50%，那么唯一的解决方案是将必须向上移动的所有内容包装到容器中，但如果您多次出现这种行为，它将变得非常乏味。您面临的问题是，如果您查看开发工具，您的元素仍然位于同一位置。如果您可能会指出：您的Chrome中的
translateY
的偏移量到底部为8px。因为我在示例中使用了内联块，所以偏移量是由元素引起的，所以您没有完全居中。否则，它完全以翻译为中心。我认为你不理解这个问题。。代码笔只是一个例子。这不是我正在使用的实际代码。元素之后的意思是？？？。在这里，转换应用于class元素下面的所有div。@DomenikReitzner
transform
不会影响布局，因为它纯粹是视觉-负边距是唯一的方法-