Как сделать цвет фона div определенного размера с содержимым, имеющим абсолютную позицию?

Question

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

Вот изображение того, чтоя пытаюсь сделать:

[! [введите описание изображения здесь] [1]] [1]

* {
  font-family: 'Poppins', sans-serif;
}
    
    
.background {
  position: relative;
  background: #DFEDFF;
  height: 100%;
  width: 100%;
}
    
.hero-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
    
.title {
  font-size: 8.4375rem;
  font-weight: 800;
  line-height: 130px;
  margin: 0;
}
    
.description {
  margin: 0;
  font-size: 2.75rem;
  font-weight: 300;
}

<div class="background">
      <div class="hero">
        <div class="hero-text">
          <h1 class="title">Hello,<br>I'm Ian</h1>
          <p class="description">Website coming soon.</p>
        </div>
        <img class="callum" src="images/callum.png" alt="">
      </div>
    </div>

Answer 1

Я применил min-height к main_container 410px, а затем оба установил абсолютный, фоновый div и текст-герой, настройку текста-героя в центре, как вы уже сделали, а затем установил левый 100px на фон, чтобы он начал настраивать фон с помощьюоставляя пространство 100px, сверху: 10px, снизу: 10px, справа: 10px и так далее.

.main_container{
  min-height:410px;
  width:100%;
  position:relative;
}

.title {
  font-size: 8.4375rem;
  font-weight: 800;
  line-height: 130px;
  margin: 0;
}

.description {
  margin: 0;
  font-size: 2.75rem;
  font-weight: 300;
}

.background{
  position:absolute;
  top:10px;
  bottom:10px;
  left:100px;
  right:10px;
  content:'';
  display:block;
  background:#DEEDFE;
  z-index:-1;
}

.hero-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div class="main_container">
<div class="background"></div>
    <div class="hero-text">
      <h1 class="title">Hello,<br>I'm Ian</h1>
      <p class="description">Website coming soon.</p>
    </div>
</div>

Answer 2

https://jsfiddle.net/3pL5srvq/1/

фон автоматически высится по тексту героя.

calc(25% - 4rem) означает позицию по центру и вершине смещения с помощью отступа (3rem) + высота балансана ваше усмотрение, я просто установил 1rem

• 25% к центру
• -4rem (удалить пробел сверху (3rem) + смещение баланса сверху (1rem))

* {
  font-family: 'Poppins', sans-serif;
}
    
    
.background {
      position: relative;
    background: #DFEDFF;
    width: 80%;
    margin: 0 auto;
}

.hero-text {
    transform: translate(-5% , calc(25% - 4rem));
    padding: 3rem 0;
}

p.description {
    margin: 0;
}

<div class="background">
      <div class="hero">
        <div class="hero-text">
          <h1 class="title">Hello,<br>I'm Ian</h1>
          <p class="description">Website coming soon.</p>
        </div>
        <img class="callum" src="images/callum.png" alt="">
      </div>
    </div>

Answer 3

Когда вы создаете элемент position:absolute;, его ширина / высота больше не будет влиять на ширину и высоту его родительского элемента.Высота div определяется его дочерним элементом, если не задана заданная высота (100% на самом деле не работает, для вас это просто магия CSS).

Если нет ребенка, который бы дал ему рост (потому что он был обесценен, потому что теперь он position:absolute;), вам нужно установить конкретную px высоту для вашего div, например height:100px