html - sirve - z-index position absolute
Flexbox, z-index & position: static: ¿Por qué no funciona? (1)
De acuerdo con la especificación flexbox:
..4.3. Los valores Flex Order Z, ... y
z-indexdistintos aautocrean un contexto de apilamiento incluso si lapositionesstatic.
Entonces, pensé que z-index / opacity debería funcionar como siempre con flexbox, pero cuando lo aplico a este HTML / CSS no funciona (mi objetivo era poner .header encima de .core creando dos capas):
.header {
opacity: 0.5;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
}
.headerLeft {
z-index: inherit;
background-color: blue;
text-align: right;
align-self: stretch;
flex: 2 1 250px;
}
.headerCenter {
z-index: inherit;
background-color: red;
text-align: right;
align-self: stretch;
flex: 1 1 175px;
}
.headerRight {
z-index: inherit;
background-color: green;
text-align: right;
align-self: stretch;
flex: 1 1 100px;
}
.core {
z-index: 0;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}
.coreItem {
align-self: stretch;
flex: 1 1 400px;
}
<body>
<div class="header">
<div class="headerLeft">Left</div>
<div class="headerCenter">Center</div>
<div class="headerRight">Right</div>
</div>
<div class="core">
<div class="coreItem">Core1</div>
<div class="coreItem">Core2</div>
<div class="coreItem">Core3</div>
<div class="coreItem">Core4</div>
<div class="coreItem">Core5</div>
<div class="coreItem">Core6</div>
</div>
</body>
Usé prefijos propios en las propiedades de flexión. No entiendo por qué no está funcionando.
Como escribió en su pregunta, los elementos no necesitan estar posicionados para que z-index funcione en un contenedor flexible.
Los elementos Flex pueden participar en un orden de apilamiento z-index incluso con position: static , que no es cierto para otros modelos de caja CSS (excepto Grid) donde z-index solo funciona en elementos posicionados.
4.3. Elemento flexible Pedido Z
Los elementos Flex pintan exactamente lo mismo que los bloques en línea, excepto que el
orderdocumento modificado por orden se usa en lugar del orden del documento sin procesar, yz-indexvalores delz-indexque no seanautocrean un contexto de apilamiento incluso si lapositionesstatic.
La razón z-index no está funcionando en su código es que div.header y div.core no son elementos flexibles. Son hijos del body , pero el body no es un contenedor flexible.
Para que z-index funcione aquí, deberá aplicar la display: flex to body .
Agregue esto a su código:
body {
display: flex;
flex-direction: column;
}
Más detalles: https://.com/a/35772825/3597276