Блог

Я создал div, который перекрывает своего родительского элемента, и поля после div ведут себя не так, как ожидалось. Я ожидаю, что содержимое, следующее за div, появится после вышележащего div, но это не так.

Ожидаемое поведение :

ожидаемый образ

Реальность :

Реальность

Вот код:

HTML:

 <div>
  <div class="hero">
    <div class="heading">
      <h1>Greg Potts' Website</h1>
      <h4>
        Software Developer / Vim-er / Bash-er
      </h4>
    </div>
  </div>
  <p>Some content next</p>
</div>
  

CSS:

 .hero {
  height: 20vh;
  width: 100%;
  background: #272c33;
}
.heading {
  position: relative;
  top: calc(15vh);
  width: 50%;
  padding: 30px;
  margin: auto; /* horizontally center */
  background: white;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}
.heading h1, h2, h3, h4, h5, h6 { text-align: center; }
  

Я подозреваю, что это как-то связано с clearfix, но попробовал несколько решений, и они не сработали так, как предполагалось.

Спасибо.

Я бы выбрал реструктуризацию элемента HTML, чтобы достичь этого, поскольку это невозможно сделать без добавления пустого элемента clearfix при работе со структурой, которую вы установили.

Вместо этого было бы действительно просто удалить вложенные элементы .heading из .hero и вместо этого использовать отрицательное значение для top свойства css.

Вы можете дополнительно обернуть элементы .hero и .heading в контейнер, чтобы изменить левое нижнее поле в результате отрицательного top значения.

Код будет выглядеть следующим образом:

HTML

 <div>
    <div class="hero-container">
        <div class="hero"></div>
        <div class="heading">
            <h1>Greg Potts' Website</h1>
            <h4>
                Software Developer / Vim-er / Bash-er
            </h4>
        </div>
    </div>

    <p>Some content next</p>
</div>
  

CSS

 .hero {
    height: 20vh;
    width: 100%;
    background: #272c33;
}
.heading {
    position: relative;
    top: calc(-10vh);
    width: 50%;
    padding: 30px;
    margin: auto; /* horizontally center */
    background: white;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}
.hero-container {
    margin-bottom: calc(-10vh);
}
.heading h1, h2, h3, h4, h5, h6 { text-align: center; }