Как добавить маржу в относительный родительский элемент переполнения Div для перемещения содержимого вниз - PullRequest
Новая
       35

Как добавить маржу в относительный родительский элемент переполнения Div для перемещения содержимого вниз

0 голосов
/ 07 марта 2019

Я создал 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, но попробовал несколько решений, и они не сработали, как предполагалось.

Спасибо.

1 Ответ

0 голосов
/ 07 марта 2019

Я бы пошел с реструктуризацией элемента 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; }
...