html - 转换后如何摆脱未使用的空间？

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，但它在“未转换”的第一个文本下方 10px。

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

对纯 CSS 有什么想法吗？

Answer 1

转换独立于 DOM 的其余部分移动元素。

代替 transform: -50%; 使用 margin:

margin-top: -50%;

以下元素应占据通过将目标元素向上移动而产生的空间。

.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>