Почему функция align: center in the parent портит мою позицию: абсолютные наложения? - PullRequest
Новая
       9

Почему функция align: center in the parent портит мою позицию: абсолютные наложения?

0 голосов
/ 02 сентября 2018

Может ли кто-нибудь объяснить, почему при использовании display: flex; align: center; в родительском элементе этого меню портятся два абсолютно позиционированных оверлея в дочернем элементе?

Вот скрипка, где вы можете попробовать ее с align: center и без, чтобы понять мой смысл. (раскомментировать / * выровнять: центр; * / в .меню)

https://jsfiddle.net/Hastig/wmtr87gc/

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>

1 Ответ

0 голосов
/ 02 сентября 2018

Поскольку средний элемент содержит только абсолютные элементы, поэтому внутри него нет содержимого потока, определяющего его высоту. Тогда значение по умолчанию align-items равно stretch , поэтому ваш элемент будет растянут по умолчанию, а его высота будет равна его родительской высоте, НО, если вы измените выравнивание, элемент будет учитывать его содержимое для определения высоты, и так как нет никакого элемента в потоке, у которого будет height:0, что означает, что индикатор выполнения, определенный top:0;bottom:0, также будет иметь высоту 0.

Чтобы избежать этого, оставьте хотя бы один элемент без позиции (тот, который содержит текст), чтобы средний элемент имел некоторое содержимое в потоке, а его высота будет отличаться от 0 в зависимости от того, какое выравнивание будет . 

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