使用flexbox时如何覆盖两个div？答案

【问题标题】：How to overlay two divs when using flexbox?使用flexbox时如何覆盖两个div？
【发布时间】：2019-07-16 02:22:31
【问题描述】：

我正在使用一个父 div，它是一个 flexbox。在其中，我需要两个子 div，每个子 div 跨越父 div 的完整宽度（宽度：100%），以便它们彼此重叠（重叠）。这样，当您更改一个子 div 的宽度时，它不应该以任何方式重新定位另一个子 div。

例如：我正在尝试创建如下所示的进度条：

为此，我使用了两个 div - 呈现进度条轮廓的外部 div（灰色背景）和显示进度的内部 div（绿色背景）。我还需要在中间显示数字百分比（81%）。内部 div（绿色 bg）宽度值会根据数字百分比保持警惕。无论进度如何（内部 div 宽度），数字百分比应始终位于 OUTER DIV 的中心。

您能告诉我这是如何实现的吗？谢谢。

【问题讨论】：

你能添加一个你所追求的例子，以及你尝试过的代码吗？根据这个解释，这听起来像是position: absolute 的情况，而不是 flex。
我已经用一个例子更新了描述。发送。

标签： html css flexbox

【解决方案1】：

为了样式化一个基本的进度条，你可以使用position: absolute来覆盖项目。

您可以将flexbox 用于定位目的，但是您只需在中间文本上使用position: absolute 和后续规则（例如“80%”）就可以使用更少的代码行，同时启用同时覆盖需求和居中。

对于控制进度条（动态），您将使用 Javascript。您将在 JS 中构建一些遵循 something 进度的逻辑，然后相应地更新栏的 CSS 规则。没有 JS 就无法做到这一点。

如果您只想要一个带有动作的虚拟进度条，那么您可以使用 CSS 动画规则，在不使用 JS 的情况下对其进行动画处理。

Codepen

#container {
  position: relative;
  width: 400px;
  height: 40px;
  background-color: grey;
  border: 2px solid black;
}

#text {
    position: absolute;
    top: 50%;  
    left: 50%;
    transform: translate(-50%,-50%); 
}

#fill {
  background-color: green;
  width: 80%;
  height: 100%;
}

<div id="container">
  <div id="text">80%</div>
  <div id="fill">&nbsp;</div>
</div>

【讨论】：

【解决方案2】：

不需要 flexbox 或任何复杂的东西，你可以简单地使用背景：

.progress {
  width:200px;
  line-height:50px;
  margin:5px;
  text-align:center;
  font-size:30px;
  background:
    linear-gradient(green,green) left no-repeat,
    grey;
}

<div class="progress">
  100%
</div>

<div class="progress" style="background-size:50% 100%">
  50%
</div>

<div class="progress" style="background-size:75% 100%">
  75%
</div>

您可以添加更多颜色以更接近您想要的视觉效果：

.progress {
  width:200px;
  line-height:50px;
  margin:5px;
  text-align:center;
  font-size:30px;
  background:
    /*light overlay on the half top*/
    linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)) top/100% 50%,
    /*the two bars*/
    linear-gradient(#539041,#539041) left/5px 100%,
    linear-gradient(#539041,#539041) var(--p,100%) 0/5px 100%,
    /*the progress*/
    linear-gradient(#53e15a,#53e15a) left/var(--p,100%) 100%,
    /*the outer coloration*/
    #bbbbbb;
  background-repeat:no-repeat;
}

<div class="progress">
  100%
</div>

<div class="progress" style="--p:50%">
  50%
</div>

<div class="progress" style="--p:75%">
  75%
</div>

【讨论】：

【解决方案3】：

不确定我是否理解得很好……你想达到这样的目标吗？

HTML

<section class="parent">
  <article class="child">
  </article>
  <article class="child">
  </article>
</section>

CSS

.parent {
  display: flex;
  width: 100vw;
  justify-content: space-around;
}

.child {
  width: 50%;
  height: 60px;
}

Link to codePen

【讨论】：