对CSSz-index堆叠式布局的使用详细的解释

Z指数的重要性

在我看来，可以给我们在我们的日常工作有很大的帮助，我们用它来定义元素的层次（堆栈级别）。受益于它，你可以做Popup，下拉菜单，提示，图形置换，等等。

在我们开始这篇文章，也许我们应该先了解Z指数基本信息。

W3C是这样描述的。

每个单元都有一个三维空间位置，除了水平和垂直位置外，它还可以堆叠并排列在Z轴的上层，Z轴方向上的元素的顺序由级联上下文和堆叠级别决定。

在文档中，每个元素只属于级联上下文，元素层是一个整数，它在同一级联上下文中描述Z轴中的元素的顺序。

同一堆栈上下文，栈级大显示在小堆栈中显示在同一堆栈级别下，遵循的原则是从后面追赶，在html文档中按顺序排列。

在不同的栈上下文中，元素的顺序取决于父级联上下文的堆积级别，而这与堆栈级别无关。
顺序规则

如果没有为节点设置位置属性，则文档流后面的节点覆盖前面的节点。

xml代码将内容复制到剪贴板。
一
B
定位规则

如果位置设置为静态，文档流后面的节点仍然覆盖前节点浮动，所以位置：静态不会影响节点的覆盖关系。

CSS代码将内容复制到剪贴板。
一
B

如果将位置设置为相对位置（绝对位置）、绝对位置（固定位置）或固定（固定位置），则该节点在不设置位置属性或属性值静态的情况下覆盖节点，表明前者比后者具有更高的默认水平。

CSS代码将内容复制到剪贴板。
一
B

在z-index属性干扰的情况下，根据规则和定位规则的顺序，可以使结构更复杂。我们这里有A和B是不定位置，但A-1节点到一套相对位置。根据规则，B将覆盖，并根据a'positioning规则将覆盖B.

CSS代码将内容复制到剪贴板。
A-1

B

上面所覆盖的对方在什么时候用来实现这样的外观漏洞，其实很常用，比如电子商务网站边栏类的显示列表，你可以用这个技巧来实现。

这是一个网站的显示区域的类别，悬浮层的两个类别涵盖一个类别列表框，悬浮层和节点级类别包括两个类别。如果CSS实现显示效果的使用，一级框架相当于一个在上面的例子中，一个类节点相当于A-1两类悬浮层，相当于B.
规则的参与

我们尽量不使用位置属性，但添加z-index属性节点。发现Z不为节点的工作。

CSS代码将内容复制到剪贴板。
一
B
C

W3C的z-index属性的描述是指影响z-index只有当节点的位置属性是相对的，绝对的，或固定。

z-index属性指定一个元素的堆叠顺序。只有，元素，和对与错。

CSS代码将内容复制到剪贴板。
一
B
C

默认规则

如果所有节点被定义为位置：相对。0没有定义z-index属性节点和在同一水平，没有高低之分；但Z指数大于或等于1的节点将不能覆盖节点z-index；淋巴结阴性z-index值将覆盖没有定义z-index。

CSS代码将内容复制到剪贴板。
一
B
C
D

通过检查，我们发现当位置被设置为绝对或相对固定，没有设置z-index，z-index值IE8浏览器和W3C（以下我们统称为W3C浏览器）是汽车，但汽车是IE6和0。

从父规则

如果A，B节点的所有定义：相对的位置，一个节点z-index大于B节点，然后在子节点必须覆盖在B.前面的子节点

CSS代码将内容复制到剪贴板。
A-1
B-1

如果所有节点都定义的位置：相对的，Z和B节点是相同的，但由于序列规则，B节点覆盖节点在前。即使属性节点值高于B节点，节点B或将在一个节点的前盖。

CSS代码将内容复制到剪贴板。
A-1
B-1

很多人设置z-index非常大，9999的一切，如果不考虑父节点的影响，再设置没有用，这是一个不可逾越的层次。

层次树规则

您可能认为DOM结构中的兄弟节点将进行比较并确定层次结构，但它们不是。

CSS代码将内容复制到剪贴板。
A-1
B-1

我们认为，位置设置为相对的，绝对的或固定的，和Z结一个整型值后，将被放置在一个不同的水平和DOM树，并通过比较在层次树z-index决定水平。如果上面的例子使用层次树表示，应该如下所示。
虽然A-1的值（Z指数：0）低于B-1（Z指数：1），但在层次树，一个（Z指数：2）和B-1是高低，而值大于1。据家长统治，A-1是前面1所示。

参与规则2

交战规则认为，只要节点的位置属性是相对的、绝对的或固定的，你可以参与比较的水平，是不准确的。如果所有节点都定义位置：相对的，和Z指数为整数，据来自父亲的规则，父节点的子节点的水平决定。

CSS代码将内容复制到剪贴板。
A-1

b-1-1

c-1-1-1

在这个例子中，A，B-1和C-1-1基因是父节点。Z指数的值是相同的。根据规则，前1 C-1-1基因之前，根据父母的规则，无论孩子节点z-index值是什么，c-1-1-1之前b-1-1。
如果我们把所有的父节点的z-index属性，奇怪的事情发生。IE6和IE7浏览器显示相同的效果，虽然W3C浏览器的子节点不再从父，但确定的水平，根据自己的特性。

CSS代码将内容复制到剪贴板。
A-1

b-1-1

c-1-1-1

根据默认规则，IE6、IE7和W3C浏览器元素对z-index默认值的差异。我们相信，只有当位置设置为相对的，绝对的或固定的，和Z把整型值时，节点被放置在层次树；和Z是默认值，只有在文档级别的同级节点之间。在W3C的浏览器，B-1和C-1-1基因Z指数是汽车，不参与的层次。
在IE6和IE7，因为属性的默认值是0，它还参与层次比较。
一个位置没有z-index节点不参与的层次树的比较，但它也将与DOM节点比较。

CSS代码将内容复制到剪贴板。
A-1

b-1-1

c-1-1-1

我们修改和删除最后一个例子，B-1的位置属性。W3C浏览器显示如下数字。根据定位原则，出现在面前的B-1将和C-1-1基因；并根据规则，前面是A.显示C-1-1基因
在IE6和IE7，因为和设置位置：相对，C-1-1基因和属性的默认值是0，还参与层次树的比较，所以它具有以下效果。
总结

浏览器节点显示层次结构是一项艰苦的工作，你认为A会阻止顶部的今天，但明天由于需求的变化，突然出现的B元素需要放在顶部。一层盖上一天，回头看，发现有很多块交织在一起，它们的价值比一个大的，根本没有清晰的线索。我认为医生的工作之前，最好先地位，因为Z指数和层次清晰的关系，所以后患无穷。

此外，不算非不情愿，Javaｓｃｒｉｐｔ的Z和Z，一个节点设置在最高级别的所有节点。

由于空间太长，本文只从节点属性的角度进行讨论。它不涉及特殊页面节点选择和iframe等。如果我们有机会，下次我们将与你们分享。