Pourquoi est-ce align: center dans le mess parent ma position: superpositions absolues?

voix
0

Quelqu'un pourrait -il expliquer pourquoi l' utilisation display: flex; align: center;dans le parent de ce menu bousille les deux superpositions en position absolue dans un élément enfant?

Voici un violon où vous pouvez l' essayer avec et sans align: centerobtenir mon sens. (uncomment / * align: center; * / in .menu)

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>

Créé 02/09/2018 à 05:45
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

Parce que l'élément intermédiaire ne contient que des éléments absolus donc il n'y a pas de contenu en flux à l' intérieur pour définir sa hauteur. Ensuite , la valeur par défaut align-itemsest extensible de sorte que votre élément sera pas étirée par défaut et sa hauteur sera égale à la hauteur de parent , mais si vous changez l'alignement l'élément examinera son contenu pour définir la hauteur et étant donné aucun élément en flux , il aura ce height:0qui signifie que la barre de progression définie par top:0;bottom:0aura également la hauteur 0.

Pour éviter cela, garder au moins l' un des éléments non positoned (celui qui contient le texte) de sorte que l'élément central ont un contenu en flux et sa hauteur sera différent de 0whataver l'alignement sera.

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>

Créé 02/09/2018 à 09:10
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more