CSS Magic Hall : Comprenez-vous vraiment z-index ?-tutoriel CSS-php.cn

1. Introduction 　　　　　　　　

Si vous développez simplement un simple effet pop-up, il suffit de savoir comment ajuster la relation d'empilement entre les éléments via indice z. Mais pour gérer correctement la relation en cascade entre plusieurs fenêtres contextuelles, comprendre pleinement les principes et les problèmes de compatibilité derrière z-index est une réserve de connaissances nécessaire. Cet article sert de notes compilées après avoir étudié la présentation en couches de recommandations du W3C pour référence future.

Puisqu'il est facile de provoquer une ambiguïté lors de la traduction de noms anglais en noms chinois (par exemple, le flux normal est traduit par flux de documents), cet article utilisera directement les noms anglais originaux et les explications de l'anglais noms Comme suit :

élément non positionné : Un élément sans positionnement CSS , c'est-à-dire un élément avec position : statique.

élément positionné : élément positionné CSS, c'est-à-dire élément avec position : relative/absolue/fixe.

box : L'arborescence du document est composée d'éléments et l'arborescence de rendu est composée de boîtes. L'objet réel des opérations de rendu de taille d'élément et de mise en page est effectué par des boîtes au lieu d'éléments. La boîte est générée de manière correspondante à l'élément (il existe également des boîtes anonymes qui ne sont pas générées de manière correspondante à partir de l'élément, mais sont automatiquement générées par le moteur de rendu selon les règles. L'élément non positionné correspond à la boîte de non-position, et). l'élément positionné correspond à la case de position.

axe z : L'axe z dans le système de coordonnées de positionnement de la boîte.

contexte d'empilage : contexte d'empilement, l'unité de base de l'axe z. La relation de mappage entre la boîte et le contexte d'empilement est N:1. Chaque contexte d'empilement a un contexte parent (à l'exception du contexte d'empilement racine) et 0 à N contextes enfants.

contexte d'empilement racine : Le contexte d'empilement correspondant à la boîte racine (la boîte correspondant à html/body) est le contexte ancêtre des autres contextes d'empilement. La portée du contexte d'empilement racine couvre. tout l'axe z.

niveau de pile : Niveau d'empilement Lorsque N boîtes sont dans le même contexte d'empilement, leurs positions sur l'axe z sont déterminées par le niveau de pile. Remarque : le niveau de pile est une valeur relative plutôt qu'une valeur absolue comme px.

2. Affichage graphique en couches

En fait, le z-index avec lequel nous entrons souvent en contact n'est qu'en couche affichage éd Ce n'est qu'un attribut, et comprendre le principe derrière le z-index consiste essentiellement à comprendre le principe de l'affichage en couches. Utilisons un exemple pour comprendre les objets et les attributs impliqués dans l'affichage hiérarchique (axe z, contexte d'empilement (racine), boîte, niveau de pile) et la relation entre eux.

Marquage HTML

<style type="text/css">
  p{position:relative;}</style>
<body>
  <p id="d1" style="z-index:10;">
    <p id="d4" style="z-index:-9999;"></p>
  </p>
  <p id="d2" style="z-index:8;"></p>
  <p id="d3" style="z-index:9;"></p>
  <p id="p1"><p>
</body>

Copier après la connexion

Instructions :

1. Lors de la construction de l'arbre de rendu La boîte correspondante sera générée pour l'élément, donc p#d1->d1:box,p#d2->d2:box,p#d3->d3:box,p#d4->d4:box, p #p1->p1:boîte.

2. Pour la boîte positionnée, si la valeur de l'attribut z-index n'est pas 0, un nouveau contexte d'empilement sera créé, et ses boîtes descendantes appartiendront à ce nouveau contexte d'empilement.

3. Seuls les z-index dans le même contexte d'empilement sont comparables, ce qui signifie que lorsque vous discutez du z-index, vous devez expliquer à quel contexte d'empilement se trouve le z-index. Comme dans l'exemple, bien que -9999 soit inférieur à 10, puisque d4:box et d1:box sont dans des contextes d'empilement différents, il est impossible de déterminer quelle boîte est la plus proche de l'utilisateur.

3. Règles en cascade 　　　　　　　　　

Les règles en cascade servent à décider quelle boîte est la plus proche de l'utilisateur.

1. Prémisse : les boîtes appartiennent au même contexte d'empilement et ont le même z-index

Règles : Selon l'ordre des éléments correspondant à les cases de l'arborescence du document, cette dernière est plus proche de l'utilisateur que la première (arrière-to-front)

<!-- 两种情况下，d2均排在d1的后面，因此d2在z-axis上位于d1的上面 -->
<p id="d1">
  <p id="d2">
  </p>
</p>

<p id="d1">
</p>
<p id="d2">
</p

Copier après la connexion

2. Prémisse : les boîtes appartiennent au même contexte d'empilement et des z-index différents

Règle : La boîte avec une grande valeur d'attribut z-index est plus proche de l'utilisateur

<!-- d1的z-index为12，而d2的z-index为0，所以d1在d2的上面 -->
<p id="d1" style="position:relative;z-index: 12;">
</p>
<p id="d2" style="z-index: 0;margin-top:-20px;">
</p

Copier après la connexion

3. Prémisse : les boîtes appartiennent à différents contextes d'empilement, et les contextes d'empilement n'ont pas de relation petit-enfant/père-fils

规则：boxes会向上沿着父box进行搜索，直到父boxes属于同一个stacking context为止，然后比较父boxes的z-index属性值，z-index属性值大的box更靠近用户。

<p>
  <p id="d1" style="position:relative; z-index:10;">
    <p id="d4" style="background:red; width:100px; height:100px;position:relative; z-index:9999;">d3</p> 
  </p>
  <p id="d2" style="background:blue; width:50px; height:50px; position:relative; top: -120px; z-index:9;">d2</p>
  <p id="d3" style="background:green; width:50px; height:50px; position:relative; top: -80px; position:relative; z-index:11;">d3</p>
</p>

Copier après la connexion

4. 前提：boxes属于不同的stacking context，并且stacking contexts为祖孙/父子关系

规则：属于子stacking context的box必定更靠近用户

<p style="background:blue; width:100px; height:100px; position:relative; z-index:10;">
  <p style="background:red; width:50px; height:50px; position:relative; z-index:-10;"></p>
</p>

Copier après la connexion

5. 前提：boxes属于相同的stacking context，并且两者都是non-positioned element。

规则：float:left|right的元素必定更靠近用户

四、z-index的作用　　　　　　　　　　　　　　　　　　　　　　　　

啰嗦一句：同一个stacking context的z-index才具有可比性，也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。

它有两个作用：1. 设置box在其所属的stacking context下的stack level；

2. 当z-index属性值非0时，则在该box中创建一个新的stacking context，而该box的子孙box默认属于这个新stacking context。

注意：z-index的默认值为auto，自动赋值为0。因此默认情况下不会创建新的stacking context。

z-index生效的阀门

z-index属性值仅对positioned box生效，而non-positioned box的z-index永远为0。

也许你会举出如下反例：

<p id="d1" style="z-index:10;"></p>
<script type="text/javascript">
  console.log(window.getComputedStyle(document.getElementById('d1'))['zIndex']); // 输出10</script>

Copier après la connexion

但抱歉的是，上面获取的是non-positioned element p#d1的z-index属性值，而不是non-positioned box的z-index属性值。

对于positioned element，它会将z-index赋予给对应的positioned box，而non-positioned element则不会。

五、兼容性问题——IE6/7的诡异行为　　　　　　　　　　　　　　　　

IE6、7中并非当positioned box并且z-index不为0时才创建stacking context，而是positioned box就会创建stacking context。

<style>
    .parent{width:200px; height:200px; padding:10px;}
    .sub{text-align:right; font:15px Verdana;width:100px; height:100px;}
    .lt50{left:50px;top:50px;}</style>
 
<p style="position:absolute; background:lightgrey;" class="parent">
  <p style="position:absolute;z-index:20;background:darkgray;" class="sub">20</p>
  <p style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</p>
</p>
 
<p style="position:absolute;left:80px;top:80px;background:black;" class="parent">
  <p style="position:absolute;z-index:2;background:darkgray;" class="sub">2</p>
  <p style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</p>
</p>

Copier après la connexion

符合W3C标准的渲染效果：