css - 在保持响应能力的同时覆盖在 flexbox 上

Question

使用下面的代码，我试图用文本覆盖“进度条”，我需要 flex 使其响应，

但我知道制作叠加层的唯一方法是使用固定或绝对位置之类的东西，这会破坏布局，有没有办法让它保持响应并具有动态宽度的叠加层(用于显示进度)。

.master{
  display: flex;
}
.item{
    border-right: 1px solid black;
    padding-right: 5px;
    display: inline-block;
    text-align: center;
    padding: 15px 0;
    flex-grow: 1;
    flex-basis: 0;
}

<div style='border:1px solid black;margin: 0 auto;'>
  <div class='master'>
    <span class="item">a</span>
    <span class="item">b</span>
    <span class="item">c</span>
  </div>
  <div id='overlay' style='background-color:red;opacity:0.7;width:100%;height:100%;'></div>
</div>

Answer 1

绝对位置不会破坏布局...假设您已在父级上设置定位上下文？

.parent {
  position: relative;
}

.master {
  display: flex;
}

.item {
  border-right: 1px solid black;
  padding-right: 5px;
  display: inline-block;
  text-align: center;
  padding: 15px 0;
  flex-grow: 1;
  flex-basis: 0;
}

#overlay {
  position: absolute;
  background-color: red;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<div class="parent">
  <div class="master">
    <span class="item">a</span>
    <span class="item">b</span>
    <span class="item">c</span>
  </div>
  <div id="overlay"></div>
</div>