css - 如何使 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

当你制作一个元素 position:absolute; 时，它的宽度/高度将不再影响其父元素的宽度和高度。如果没有指定设置高度，则 div 的高度由其子元素定义(100% 并不真正起作用，这对你来说只是 css 魔法)。

如果没有child给它一个高度(因为打折了，因为现在是position:absolute;)需要设置一个具体的px高度对于你的 div 例如 height:100px