Waarom heeft align: center in de bovenliggende verknoeien mijn positie: absolute overlays?

stemmen
0

Kan iemand uitleggen waarom het gebruik van display: flex; align: center;in de ouder van dit menu verknoeit de twee absoluut gepositioneerd overlays bij een kind element?

Hier is een viool waar u het kunt proberen met en zonder align: centermijn bedoeling te krijgen. (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>

De vraag is gesteld op 02/09/2018 om 05:45
bron van user
In andere talen...                            


1 antwoorden

stemmen
1

Omdat het middenelement enige absolute elementen bevat zodat er geen interne stroming inhoud erin om de hoogte te bepalen. Dan is de standaard align-itemsis stretch , zodat uw element krijgt uitgerekt door standaard en de hoogte zal gelijk zijn aan haar moedermaatschappij hoogte, maar als je de uitlijning te veranderen zal het element de inhoud ervan te overwegen om de hoogte te bepalen en aangezien er geen in-flow element zal moeten height:0waardoor de voortgangsbalk omschreven top:0;bottom:0zal ook hoog 0.

Om dit te voorkomen, altijd één van het element niet positoned (degene die de tekst bevatten), zodat het middenelement enige in-flow inhoud en de hoogte zullen verschillen van 0whataver de uitlijning zijn.

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>

antwoordde op 02/09/2018 om 09:10
bron van user

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