转换后如何摆脱未使用的space？

Question

在一个正在进行的项目中，我需要在之前的背景图片中添加一段文字。（文本应该进入前一个元素自身高度的一半）目前没问题

position: relative; top: -50%;

或

transform: translateY(-50%)

做这个把戏。

但由于这是页面的开头，我当然会在其后添加内容。这个内容得到例如30px 的 margin-top（所有这些都是通过在 CMS 中添加类实现的）。

并且变换和位置使元素在视觉上更靠前。但是下面的元素会将他的位置调整到转换后项目的原始状态。

这里 fiddle 显示了问题：

.red_box{
  width: 100%;
  height: 300px;
  background-color: red;
}
.text_transformed{
  background-color: white;
  padding: 20px;
  font-size: 30px;
  display: inline-block;
  transform: translateY(-50%);
}
.text_margin_top{
  background-color: white;
  padding: 20px;
  margin-top: 10px;
}
body{
  background-color: #e5ceb0;
}

<div class="bg">
  <div class="red_box">

  </div>
  <div class="text_transformed">
     Lorem Impusm
  </div>
  <div class="text_margin_top">
    Lorem Ipsum2
  </div>
</div>

"Lorem Ipsum2" 应该在第一个文本的白色背景之后 10px，但它在 "not-transformed" 第一个文本下方 10px。

我用谷歌搜索了很多，但似乎找不到解决方案。我目前寻求的解决方案是使用 margin-top: -NEGATIVEVALUE。但这里的问题是我必须设置准确的 PX 值才能将转换后的元素设置为前一个。这对于具有固定大小的元素来说效果很好，但由于我有动态内容，所以这不是最佳解决方案....

对纯 CSS 有什么想法吗？

Answer 1

变换独立于 DOM 的其余部分移动一个元素。

使用边距代替 transform: -50%;：

margin-top: -50%;

以下元素应占据通过向上移动目标元素创建的 space。

.red_box{
  width: 100%;
  height: 300px;
  background-color: red;
}
.text_transformed{
  background-color: white;
  padding: 20px;
  font-size: 30px;
  display: inline-block;
  margin-top: -50%;
}
.text_margin_top{
  background-color: white;
  padding: 20px;
  margin-top: 10px;
}
body{
  background-color: #e5ceb0;
}

<div class="bg">
  <div class="red_box">

  </div>
  <div class="text_transformed">
     Lorem Impusm
  </div>
  <div class="text_margin_top">
    Lorem Ipsum2
  </div>
</div>

转换后如何摆脱未使用的space？

How to get rid of unused space after transform?

html

css

less