html - 使用flexbox时如何叠加两个div？

Question

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

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

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

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

Answer 1

对于基本进度条的样式，您可以使用position: absolute 来覆盖元素。

您可以使用 flexbox 来定位，但是您可以通过在中间使用 position: absolute 和后续规则来使用更少的代码行文本(例如“80%”)，同时满足叠加需求和居中需求。

要(动态)控制进度条，您可以使用 Javascript。您将在 JS 中构建一些逻辑来跟踪某事的进展，然后相应地更新栏的 CSS 规则。没有 JS 就无法做到这一点。

如果您只想要一个带有运动的虚拟进度条，那么您可以在没有 JS 的情况下通过使用 CSS 动画规则为其设置动画。

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>