¿Cuánto sabe sobre el orden de apilamiento y el contexto de apilamiento?

Eche un vistazo a la siguiente pregunta, defina dos divs A y B para que se incluyan bajo la misma etiqueta div principal. La estructura HTML es la siguiente:

<div class="container">
    <div class="inline-block">#divA display:inline-block</div>
    <div class="float"> #divB float:left</div>
</div>

Sus definiciones de CSS son las siguientes:

.container{
    
    
    position:relative;
    background:#ddd;
}
.container > div{
    
    
    width:200px;
    height:200px;
}
.float{
    
    
    float:left;
    background-color:deeppink;
}
.inline-block{
    
    
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

En términos generales, significa que dos DIV que tienen el mismo contenedor principal se superponen entre sí. ¿Display: inline-block apilado en la parte superior o flotante: izquierdo apilado en la parte superior?

Tenga en cuenta que el orden del DOM es generar display: inline-block primero, y luego float: left. Por supuesto, también puede cambiar el orden de los dos DOM de la siguiente manera:

<div class="container">
    <div class="float"> #divB float:left</div>
    <div class="inline-block">#divA display:inline-block</div>
</div>

Descubrirá que, independientemente del orden, el div con display: inline-block siempre se apila en la parte superior.
En realidad, esto implica el llamado nivel de apilamiento. Hay una imagen que se puede explicar bien:

utilizando la lógica de la figura anterior, el problema anterior se puede resolver fácilmente. El nivel de apilamiento de inline-blcok es más alto que el de float, así que independientemente de DOM, el pedido se apila en la parte superior.

Sin embargo, la declaración anterior es algo inexacta. Según la declaración oficial de W3, el séptimo piso exacto es:

1 、 el fondo y los bordes del elemento que forma el contexto de apilamiento.
2 、 el niño apila contextos con niveles de apilamiento negativos (los más negativos primero).
3 、 los descendientes en flujo, no en línea, no posicionados.
4 、 los flotadores no posicionados.
5 、 los descendientes no posicionados, de nivel en línea y de flujo de entrada, incluidas las tablas en línea y los bloques en línea.
6 、 los contextos de apilamiento secundario con nivel de pila 0 y los descendientes posicionados con nivel de pila 0.
7 、 el contexto de apilamiento secundario con niveles de pila positivos (el menos positivo primero).

Una pequeña traducción:

1. El fondo y el borde de los elementos que forman el contexto de apilamiento
2. Elementos de contexto de sub-apilamiento con índice z negativo (cuanto más alto es el negativo, más bajo es el nivel de apilamiento)
3. El diseño de flujo normal, bloque no en línea , sin posicionamiento de posición (Excepto estático) elementos secundarios
4. Elementos flotantes sin posicionamiento de posición (excepto estático)
5. Diseño de flujo normal, elementos de bloque en línea, elementos secundarios sin posicionamiento de posición (excepto estático) (incluyendo pantalla: tabla y pantalla: en línea )
6. Elementos de contexto de subapilamiento con índice z: 0
7. Elementos de contexto de subapilamiento con índice z positivo: (cuanto menor es el positivo, menor es el nivel de apilamiento)

Entonces, la comparación de nuestros dos divs se basa en el 4 y el 5 enumerados anteriormente. El nivel de apilamiento de 5 es mayor, por lo que el apilamiento es mayor.

¡pero! ¡pero! ¡pero! Aquí viene el punto importante: tenga en cuenta que la comparación anterior se basa en el hecho de que ninguno de los dos divs forma un contexto de apilamiento. Modifiquemos el título y agreguemos una opacidad a dos divs:

.container{
    
    
    position:relative;
    background:#ddd;
}
.container > div{
    
    
    width:200px;
    height:200px;
    opacity:0.9; // 注意这里，增加一个 opacity
}
.float{
    
    
    float:left;
    background-color:deeppink;
}
.inline-block{
    
    
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

Verá que el div de bloque en línea ya no está necesariamente apilado en el div flotante, sino que está relacionado con el orden de apilamiento del DOM en el código HTML, y el div agregado más tarde se apilará en el div agregado primero.

El punto clave aquí es que la opacidad agregada: 0.9 permite que ambos divs generen el concepto de contexto de apilamiento. En este momento, se requiere el índice Z para colocar los dos en una disposición en capas. Cuanto mayor sea el índice Z, mayor será la capa en capas.

El contexto de apilamiento es un concepto tridimensional de elementos HTML. Estos elementos HTML se extienden en un eje z imaginario en relación con las ventanas o páginas web que se encuentran frente al usuario (pantalla de computadora). Los elementos HTML ocupan el espacio de los contextos de apilamiento en orden de prioridad según sus propios atributos.

Entonces, ¿cómo activar un elemento para formar un contexto de apilamiento? El método es el siguiente, tomado de MDN:

Elemento raíz (HTML),
posicionamiento absoluto / relativo cuyo
valor de índice z no es "auto", un elemento flexible cuyo valor de índice z no es "auto", a saber: elemento padre display: flex | inline-flex,
El elemento cuyo el valor del atributo de opacidad es menor que 1 (consulte la especificación de opacidad),
el elemento cuyo valor de atributo de transformación no es "ninguno", el elemento cuyo
valor de atributo de modo de mezcla no es "normal" y el elemento cuyo
valor de filtro no es "ninguno" Elemento, el elemento
cuyo valor de perspectiva no es "ninguno", el elemento cuyo
atributo de aislamiento se establece en "aislar",
posición: fija
tiene atributos CSS especificados en will-change, incluso si no especifica directamente el valor de estos atributos
-webkit-overflow -Elementos cuyo atributo de desplazamiento se establece en "touch"

Por lo tanto, el propósito de agregar el atributo de opacidad a los dos divs anteriores es formar un contexto de apilamiento. Es decir, agregar opacidad y reemplazarlos con los atributos enumerados anteriormente puede lograr el mismo efecto.

En el contexto del apilamiento, sus elementos secundarios también se apilan de acuerdo con las reglas explicadas anteriormente. En particular, vale la pena mencionar que el valor del índice z de sus elementos secundarios solo es significativo en el contexto del apilamiento principal. Esto significa que el índice z del elemento principal es menor que el de otro elemento en el mismo nivel del elemento principal, y el índice z del elemento secundario es inútil sin importar qué tan alto sea.

Comprender el nivel de apilamiento y el contexto de apilamiento anteriores es la clave para comprender el orden de apilamiento de CSS.

El contenido del artículo está reimpreso en https://mp.weixin.qq.com/s/Qaduz-ogRgI47G_sSA_b-w.
Después de leerlo, lo encuentro muy útil. Ponlo aquí para grabarlo para una revisión posterior.
Si hay una infracción, comuníquese con el bloguero para eliminar