为什么 align: center in parent 弄乱了我的 position: absolute overlays？

Question

有人可以解释为什么在此菜单的父级中使用 display: flex; align: center; 会弄乱子元素中的两个绝对定位的叠加层吗？

这是一个 fiddle，您可以在其中尝试使用和不使用 align: center 来理解我的意思。 (在 .menu 中取消注释 /* align: center; */)

body { background-color: gray;}
.menu {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    width: 100%;
    padding: 5px 0;
    background-color: hsl(0, 0%, 30%);
}
.menu-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 13px;
  color: hsl(0, 0%, 70%);
}
.menu-item.progress {
  background-color: gray;
}
.progress-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 83%;
  background-color: hsla(191, 58%, 46%, 1);
}
.progress-value {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: hsl(0, 0%, 90%);
}

<div class="menu">
  <div class="menu-item">Stuff</div>
  <div class="menu-item progress">
    <div class="progress-bar"></div>
    <div class="progress-value">83</div>
  </div>
  <div class="menu-item">Things</div>
</div>

Answer 1

因为中间元素只包含绝对元素所以里面没有流入的内容来定义它的高度。然后默认的 align-items 是 stretch 所以你的元素将默认拉伸并且它的高度将等于它的父高度但是如果你改变对齐方式元素将考虑它的内容来定义高度并且因为没有流入元素它将具有 height:0 这意味着由 top:0;bottom:0 定义的进度条也将具有高度 0.

为避免这种情况，请至少保留一个未定位的元素（包含文本的元素），以便中间元素有一些流入内容并且其高度将不同于 0 whataver对齐将是。

body {
  background-color: gray;
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 5px 0;
  background-color: hsl(0, 0%, 30%);
}

.menu-item {
  position: relative;
  z-index:0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 13px;
  color: hsl(0, 0%, 70%);
}

.menu-item.progress {
  background-color: gray;
}

.progress-bar {
  position: absolute;
  z-index:-1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 83%;
  background-color: hsla(191, 58%, 46%, 1);
}

.progress-value {
  color: hsl(0, 0%, 90%);
}

<div class="menu">
  <div class="menu-item">Stuff</div>
  <div class="menu-item progress">
    <div class="progress-bar"></div>
    <div class="progress-value">83</div>
  </div>
  <div class="menu-item">Things</div>
</div>

为什么 align: center in parent 弄乱了我的 position: absolute overlays？

Why does align: center in the parent mess up my position: absolute overlays?

css

css-position

flexbox