Компенсировать область, перемещенную с помощью преобразования: translate

Question

Я пытаюсь удалить пустую область, которую оставляет элемент после его перемещения с помощью transform: translateY.Так что, в основном, в этом коде, приведенном ниже, я хочу, чтобы желтый элемент находился прямо под синим элементом без пробела между ними.Потому что это для шаблона, мне нужно добиться этого без изменения кода выше или ниже элемента.Элемент перемещается в процентах от размера элемента.Моей первоначальной идеей было добавить

margin-bottom: -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 s как 100px, и перевели синий для 50% от этого = 50px, вы можете добавить margin-bottom: -50px; и все будет установлено

Answer 2

Вы можете легко сделать это, если добавите дополнительную обертку, куда поместите элементы 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>

Answer 3

Попробуйте также добавить translateY(-50%) к желтому элементу, это сместит его вверх, чтобы убрать пространство между ним и синим.

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