¿Por qué align: center en el lío padre hasta mi posición: superposiciones absolutos?

votos
0

Alguien podría explicar por qué el uso display: flex; align: center;de la matriz de este menú puede confundir las dos superposiciones de posición absoluta en un elemento hijo?

He aquí un violín, donde se puede probar con y sin align: centerconseguir mi significado. (uncomment / * align: center; * / en .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>

Publicado el 02/09/2018 a las 05:45
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
1

Debido a que el elemento medio contiene sólo elementos absolutos lo que no hay contenido en el flujo en su interior para definir su altura. A continuación, el valor por defecto align-itemses de estiramiento para que su elemento conseguirá estirada de forma predeterminada y su altura será igual a su altura padres pero si cambia la alineación del elemento tendrá en cuenta su contenido para definir la altura y puesto que no hay término elemento flujo que tendrá height:0lo que significa que la barra de progreso definido por top:0;bottom:0también tendrá altura 0.

Para evitar esto, mantener al menos uno de los elementos no positoned (la que contiene el texto) de manera que el elemento medio tiene algún contenido en el flujo y su altura serán diferentes de 0whataver será la alineación.

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>

Respondida el 02/09/2018 a las 09:10
fuente por usuario

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