Warum align: center in dem übergeordneten Chaos meiner Position nach oben: absolute Overlays?

stimmen
0

Könnte jemand erklären , warum mit display: flex; align: center;in einem Kind - Elemente die beide absolut positionierte Overlays vermasselt im übergeordneten dieses Menü?

Hier ist eine Geige , wo Sie können versuchen , es mit und ohne align: centermeine Bedeutung zu bekommen. (Kommentar- / * 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>

Veröffentlicht am 02/09/2018 um 05:45
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
1

Da das mittlere Element nur absolute Elemente enthält , so dass es keinen in Strömungsgehalt im Innern seine Höhe zu definieren. Dann wird der Standard align-itemsist Stretch so wird Ihr Element standardmäßig und seine Höhe wird auf seine Mutter Höhe gedehnt gleich sein , aber wenn Sie die Ausrichtung ändern wird das Element betrachtet dessen Inhalt die Höhe zu definieren , und es da keine in-Flow - Element wird es hat height:0was bedeutet , dass die Fortschrittsbalken , die durch top:0;bottom:0auch Höhe aufweisen werden 0.

Um dies zu vermeiden, halten Sie mindestens eines der Elemente nicht positoned (derjenige, der den Text enthalten) , so dass das mittlere Element einige in-Flow haben Inhalt und seine Höhe wird anders sein von 0whataver die Ausrichtung sein wird.

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>

Beantwortet am 02/09/2018 um 09:10
quelle vom benutzer

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