Continue document flow after transform: translateY(-50%)

user_1769883 0
Viewed 227

I need to close the gap following a CSS transform: translateY(-50%) so that content flows on naturally.

I have tried other methods but have been unable to move the element up by 50% of its own height. Negative margin as a percentage is based on the height of the window so this doesn't seem like an option, nor can I set a negative margin on the following element as it needs to be based on the height of the header.

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/

It may be that this is only possible using Javascript but it would be great to get it done with pure CSS as JS and media queries are a pain to implement.

Thanks in advance.

css-position css-transforms css
1 Answers

Instead of using transform: translateY(-50%), use margin-top: -25vh.
This will place the .title-container in the same place, yet keep the .article-body flush below it:

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

user_23416030
Related