CSSz-index层级关系优先的概念
在堆叠顺序中的节点集的CSS z-index属性，具有较高的堆叠顺序的节点将节点的堆叠顺序的前面显示的是低的，这是我们的总的Z指数性质的理解。同时，我们总是在堆叠顺序不可预知的，设置z-index值可能无法在前节点显示。本文将利用Z指数方法分析一些实例，并集中到概念层次树的你。目录
顺序规则
定位规则
规则的参与
默认规则
从父规则
层次树规则
参与规则2
总结
顺序规则
如果没有为节点设置位置属性，则文档流后面的节点覆盖前面的节点。
复制代码代码如下：
B
CSS z-index属性的顺序规则的一个例子
定位规则
如果位置设置为静态，文档流后面的节点仍然覆盖前节点浮动，所以位置：静态不会影响节点的覆盖关系。
复制代码代码如下：
B
的CSS z-index属性定位规则的一个例子，静态
如果将位置设置为相对位置（绝对位置）、绝对位置（固定位置）或固定（固定位置），则该节点在不设置位置属性或属性值静态的情况下覆盖节点，表明前者比后者具有更高的默认水平。
复制代码代码如下：
B
CSS z-index属性规则的例子，相对绝对固定| |
在z-index属性干扰的情况下，根据规则和定位规则的顺序，可以使结构更复杂。我们这里有A和B是不定位置，但A-1节点到一套相对位置。根据规则，B将覆盖，并根据a'positioning规则将覆盖B.
复制代码代码如下所示：
A-1
B
CSS z-index属性相互覆盖的一个例子
上面所覆盖的对方在什么时候用来实现这样的外观漏洞，其实很常用，比如电子商务网站边栏类的显示列表，你可以用这个技巧来实现。
这是一个网站的显示区域的类别，悬浮层的两个类别涵盖一个类别列表框，悬浮层和节点级类别包括两个类别。如果CSS实现显示效果的使用，一级框架相当于一个在上面的例子中，一个类节点相当于A-1两类悬浮层，相当于B.
电子商务网站边栏的项目列表
规则的参与
我们尽量不使用位置属性，但添加z-index属性节点。发现Z不为节点的工作。
复制代码代码如下：
B
C
的CSS z-index属性参与规则的一个例子，当没有明确的定位
W3C的z-index属性的描述是指影响z-index只有当节点的位置属性是相对的，绝对的，或固定。
z-index属性指定一个元素的堆叠顺序。只有，元素，和对与错。
复制代码代码如下：
B
C
的CSS z-index属性参与规则的一个例子，并明确定位节点可以使用z-index属性
默认规则
如果所有节点被定义为位置：相对。0没有定义z-index属性节点和在同一水平，没有高低之分；但Z指数大于或等于1的节点将不能覆盖节点z-index；淋巴结阴性z-index值将覆盖没有定义z-index。
复制代码代码如下：
B
C
D
对CSS z-index属性的默认值规则的例子
通过检查，我们发现当位置被设置为绝对或相对固定，没有设置z-index，z-index值IE8浏览器和W3C（以下我们统称为W3C浏览器）是汽车，但汽车是IE6和0。
从父规则
如果A，B节点的所有定义：相对的位置，一个节点z-index大于B节点，然后在子节点必须覆盖在B.前面的子节点
复制代码代码如下所示：
A-1
B-1
CSS z-index属性是从母公司的规则的例子，孩子节点不设置层次
如果所有节点都定义的位置：相对的，Z和B节点是相同的，但由于序列规则，B节点覆盖节点在前。即使属性节点值高于B节点，节点B或将在一个节点的前盖。
复制代码代码如下所示：
A-1
B-1
CSS z-index属性是从母规则的实例一个不可逾越的层次
很多人设置z-index非常大，9999的一切，如果不考虑父节点的影响，再设置没有用，这是一个不可逾越的层次。
层次树规则
您可能认为DOM结构中的兄弟节点将进行比较并确定层次结构，但它们不是。
复制代码代码如下所示：
A-1
B-1
的CSS z-index属性层次结构树的规则的一个例子
我们认为，位置设置为相对的，绝对的或固定的，和Z结一个整型值后，将被放置在一个不同的水平和DOM树，并通过比较在层次树z-index决定水平。如果上面的例子使用层次树表示，应该如下所示。
CSS z-index分层树
虽然A-1的值（Z指数：0）低于B-1（Z指数：1），但在层次树，一个（Z指数：2）和B-1是高低，而值大于1。据家长统治，A-1是前面1所示。
参与规则2
交战规则认为，只要节点的位置属性是相对的、绝对的或固定的，你可以参与比较的水平，是不准确的。如果所有节点都定义位置：相对的，和Z指数为整数，据来自父亲的规则，父节点的子节点的水平决定。
复制代码代码如下所示：
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。
CSS z-index属性参与规则2例，所有节点参与层次比较
如果我们把所有的父节点的z-index属性，奇怪的事情发生。IE6和IE7浏览器显示相同的效果，虽然W3C浏览器的子节点不再从父，但确定的水平，根据自己的特性。
复制代码代码如下所示：
A-1
b-1-1
c-1-1-1
根据默认规则，IE6、IE7和W3C浏览器元素对z-index默认值的差异。我们相信，只有当位置设置为相对的，绝对的或固定的，和Z把整型值时，节点被放置在层次树；和Z是默认值，只有在文档级别的同级节点之间。在W3C的浏览器，B-1和C-1-1基因Z指数是汽车，不参与的层次。
CSS z-index属性参与规则2例，自动节点不参与层次比较集中
在IE6和IE7，因为属性的默认值是0，它还参与层次比较。
CSS z-index属性参与规则2例，并在IE6和IE7 z-index默认是0
一个位置没有z-index节点不参与的层次树的比较，但它也将与DOM节点比较。
复制代码代码如下所示：
A-1
b-1-1
c-1-1-1
我们修改和删除最后一个例子，B-1的位置属性。W3C浏览器显示如下数字。根据定位原则，出现在面前的B-1将和C-1-1基因；并根据规则，前面是A.显示C-1-1基因
CSS z-index属性与规则2例。层次树比较不涉及自动位置节点，但仍参与DOM兄弟节点、W3C浏览器之间的层次比较。
在IE6和IE7，因为和设置位置：相对，C-1-1基因和属性的默认值是0，还参与层次树的比较，所以它具有以下效果。
CSS z-index属性与规则2例。汽车位置的节点不参与层次树的比较，但仍参与层次比较DOM兄弟节点中，IE6和IE7。
总结
浏览器节点显示层次结构是一项艰苦的工作，你认为A会阻止顶部的今天，但明天由于需求的变化，突然出现的B元素需要放在顶部。一层盖上一天，回头看，发现有很多块交织在一起，它们的价值比一个大的，根本没有清晰的线索。我认为医生的工作之前，最好先地位，因为Z指数和层次清晰的关系，所以后患无穷。
此外，不算非不情愿，Javaｓｃｒｉｐｔ的Z和Z，一个节点设置在最高级别的所有节点。
由于空间太长，本文只从节点属性的角度进行讨论。它不涉及特殊页面节点选择和iframe等。如果我们有机会，下次我们将与你们分享。
以上是对概念的完整内容概念的CSS z-index层级，希望能给大家一个参考，也希望你有很多的支持。