如何使用具有绝对位置的内容使 div 背景颜色具有一定大小？答案

【问题标题】：How do I make div background color certain size with contents having position absolute?如何使用具有绝对位置的内容使 div 背景颜色具有一定大小？
【发布时间】：2018-07-07 07:19:26
【问题描述】：

我正在尝试使 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>

【问题讨论】：

你想达到哪个结果。你的设计应该看起来像图像还是小提琴结果？？
@FridayAmeh 请提供图片
试一试——这有帮助吗？ jsfiddle.net/3pL5srvq/2

标签： css

【解决方案1】：

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

如果没有孩子给它一个高度（因为它已经打折了，因为它现在是position:absolute;）你需要为你的div设置一个特定的px高度，例如height:100px

【讨论】：

【解决方案2】：

我将 min-height 应用到 main_container 410px，然后都设置了 absolute 、background div 和 hero-text ，就像你已经做的那样在中心设置英雄文本，然后将左侧 100px 设置为背景，这样它将通过留下 100px 空间开始设置背景，顶部：10 像素，底部：10 像素，右侧：10 像素等等......

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

【讨论】：

【解决方案3】：

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

背景将根据英雄文本自动增长高度。

calc(25% - 4rem) 表示通过填充空间（3rem）+平衡高度到你的中心和偏移顶部的位置，我只是设置为 1rem

25% 到中心
-4rem (移除 padding-top space(3rem) + balance offset-top(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>

【讨论】：