Introduction détaillée à l'ordre d'empilement CSS et au contexte de pile

Résolvez le problème sans tenir compte de la compatibilité. Les questions sont sauvages et sans contrainte. Dites simplement ce qui vous vient à l'esprit. S'il y a des attributs CSS que vous ne trouvez pas familiers dans la résolution de problèmes. 🎜>, dépêchez-vous et renseignez-vous sur Bar.

Continuez à mettre à jour, continuez à mettre à jour, continuez à mettre à jour, dites des choses importantes trois fois.

3. Que savez-vous du niveau d'empilement et du contexte d'empilement ?

<a href="http://www.php.cn/wiki/903.html" target="_blank">z-index<p style="text-align: left;"> code> semble en fait très simple. La <span style="font-size: 14px; font-family: verdana, geneva;"> priorité en cascade <code><a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a> est déterminée en fonction du niveau de z-index. En fait, si vous approfondissez, vous découvrirez qu'il y a quelque chose de caché à l'intérieur.

Regardez la question suivante, définissez deux

A et B, inclus sous la même balise parent . La structure HTML est la suivante : pp

<p>
    </p><p>#pA display:inline-block</p>
    <p> #pB float:left</p>

Leurs

définitions sont les suivantes : CSS

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

En gros, décrite, elle signifie avoir quelque chose en commun. Les deux p du conteneur parent se chevauchent.

est-il empilé sur le dessus, ou est-il empilé sur le dessus ? display:inline-blockfloat:left

Notez que l'ordre du DOM ici est de générer

d'abord, puis . Bien entendu, vous pouvez également inverser l'ordre des deux DOM comme suit : display:inline-blockfloat:left

<p>
    </p><p> #pB float:left</p>
    <p>#pA display:inline-block</p>

Vous constaterez que quel que soit l'ordre,

et sont toujours. empilés sur le dessus. display:inline-blockp

Cela implique en fait ce qu'on appelle le niveau d'empilement. Il y a une image qui peut bien l'expliquer :

En utilisant la logique de l'image ci-dessus, le problème ci-dessus peut être facilement résolu. Le

de est supérieur à inline-blcok, donc quel que soit l'ordre du DOM, ils. sont empilés dessus. stacking levelfloat

Cependant, l'illustration ci-dessus est quelque peu inexacte. Selon les responsables de W3, les 7 couches exactes sont :

1. . l'arrière-plan et les bordures de l'élément formant le contexte d'empilement.

2. l'enfant empilant les contextes avec des niveaux de pile négatifs (le plus négatif en premier).

3. les descendants entrants, non en ligne et non positionnés.

4. les non positionnés flotteurs.

5. les descendants entrants, de niveau en ligne et non positionnés, y compris les tables en ligne et les blocs en ligne.

6. l'enfant empilant les contextes avec le niveau de pile 0 et les descendants positionnés avec le niveau de pile 0.

7. l'enfant empilant les contextes avec des valeurs positives niveaux de stack (le moins positif en premier).

Une petite traduction :

1. 形成堆叠上下文环境的元素的背景与边框

2. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）

3. 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素

4. 无 position 定位（static除外）的 float 浮动元素

5. 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）

6. 拥有 z-index:0 的子堆叠上下文元素

7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

所以我们的两个 p 的比较是基于上面所列出来的 4 和 5 。5 的 stacking level 更高，所以叠得更高。

不过！不过！不过！重点来了，请注意，上面的比较是基于两个 p 都没有形成 堆叠上下文 这个为基础的。下面我们修改一下题目，给两个 p ，增加一个 opacity:

.container{
    position:relative;
    background:#ddd;
}
.container > p{
    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;
}

Demo戳我。

会看到，inline-block 的 p 不再一定叠在 float 的 p 之上，而是和 HTML 代码中 DOM 的堆放顺序有关，后添加的 p 会 叠在先添加的 p 之上。

这里的关键点在于，添加的 opacity:0.9 这个让两个 p 都生成了 stacking context（堆叠上下文） 的概念。此时，要对两者进行层叠排列，就需要 z-index ，z-index 越高的层叠层级越高。

堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

那么，如何触发一个元素形成 堆叠上下文 ？方法如下，摘自 MDN：

• 根元素 (HTML),

• z-index 值不为 "auto"的 绝对/相对定位，

• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，

• opacity 属性值小于 1 的元素（参考 the specification for opacity），

• transform 属性值不为 "none"的元素，

• mix-blend-mode 属性值不为 "normal"的元素，

• Éléments dont la valeur de filtre n'est pas "aucun",

• éléments dont la valeur de perspective n'est pas "aucun",

• L'élément dont l'attribut d'isolation est défini sur "isoler",

• position : corrigé

• Spécifiez toutes les propriétés CSS dans will-change, même si vous ne spécifiez pas directement la valeur de ces propriétés

• -webkit-overflow-élément de défilement avec l'ensemble d'attributs "touch"

Donc, ci-dessus, nous donnons 2Le but de l'ajout de l'attribut opacity est de former un contexte d'empilement. En d’autres termes, ajouter de l’opacité et remplacer les attributs répertoriés ci-dessus peut obtenir le même effet.

Dans un contexte d'empilement, ses éléments enfants sont également empilés selon les règles expliquées ci-dessus. Il convient particulièrement de mentionner que la valeur z-index de ses éléments enfants n'a de sens que dans le contexte de la cascade parent. Cela signifie que le z-index de l'élément parent est inférieur à un autre élément frère de l'élément parent, et il est inutile quelle que soit la hauteur de l'élément enfant z-index.

Comprendre les stacking-level et stacking-context ci-dessus est la clé pour comprendre l'ordre en cascade du CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!