Продолжить документооборот после преобразования: translateY (-50%)

Question

Мне нужно сократить разрыв после CSS-преобразования: translateY (-50%), чтобы контент шел естественным путем.

Я пробовал другие методы, но не смог переместить элемент вверх на 50%.своей высоты.Отрицательное поле в процентах основано на высоте окна, поэтому это не похоже на вариант, и я не могу установить отрицательное поле для следующего элемента, так как оно должно основываться на высоте заголовка.

HTML:

<div class="header">
  <div class="featured-image">
    <!-- this is in place of the featured image -->
  </div>

  <div class="title-container">
    <h1>Title<br />goes<br />here</h1>
  </div>
</div>

<div class="article-body">
  <p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>

CSS:

.header {
  width: 100%.
  position: relative;
}

.featured-image {
  width: 100%;
  height: 200px;
  background-color: blue;
}

.title-container {
  width: 50%;
  margin: 0 auto;
  transform: translateY(-50%);
  background-color: yellow;
}

JS Fiddle:

https://jsfiddle.net/robertirish/tyh18orq/16/

Возможно, это тольковозможно использование Javascript, но было бы здорово сделать это с помощью чистого CSS, так как JS и медиазапросы - трудная задача для реализации.

Заранее спасибо.

Answer 1

Вместо использования transform: translateY(-50%) используйте margin-top: -25vh.Это поместит .title-container в то же место, но при этом удержит флеш .article-body под ним:

.header {
  width: 100%.
  position: relative;
}

.featured-image {
  width: 100%;
  height: 200px;
  background-color: blue;
}

.title-container {
  width: 50%;
  margin: 0 auto;
  /*transform: translateY(-50%);*/
  margin-top: -25vh;
  background-color: yellow;
}

<div class="header">
  <div class="featured-image">
    <!-- this is in place of the featured image -->
  </div>
  
  <div class="title-container">
    <h1>Title<br />goes<br />here</h1>
  </div>
</div>

<div class="article-body">
  <p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>