Miért align: center a szülő összezavar én position: absolute átfedések?

szavazat
0

Lehet valaki magyarázni, hogy miért használja display: flex; align: center;a szülő ezt a menüt elrontja a két abszolút pozicionált átfedések a gyermek elem?

Itt egy hegedű, ahol lehet próbálni és anélkül align: center, hogy mire gondolok. (megjegyzésből / * 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>

A kérdést 02/09/2018 05:45
a forrás felhasználó
Más nyelveken...                            


1 válasz

szavazat
1

Mivel a középső elem tartalmaz egyetlen abszolút elemeket, így nincs a-áramlás tartalom benne kell határozni annak magasságát. Ezután az alapértelmezett align-itemsvan szakaszon , így az elem lesz megnyújtva alapértelmezés magassága egyenlő lesz a szülő magasságú, de ha megváltoztatja a beállítást az elem fogja vizsgálni annak tartalmát, hogy meghatározza a magasságot és mivel nem in-flow elem, hogy lesz height:0ami azt jelenti, hogy az állapotjelző sáv által meghatározott top:0;bottom:0is lesz magassága 0.

Ennek elkerülése érdekében, hogy legalább az egyik elem nem meghelyezett (az egyik szöveget tartalmazó) úgy, hogy a középső elem van néhány in-flow tartalmát és annak magassága eltérő lesz 0whataver az összehangolás lesz.

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>

Válaszolt 02/09/2018 09:10
a forrás felhasználó

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