zindex的堆叠次序是怎么回事？zindex的堆叠次序详解

许多人刚刚接触z-index，并不知道z-index如何用，其实z-index并不是很复杂，用起来也不是那么简便，那么，zindex的堆叠次序是如何回事？下面为您总结一下zindex的堆叠次序。

一：zindex的堆叠次序

zindex是很简便的，我们知道每一个文档元素既可以在元素的前面，也可以在元素的后面，这就是我们常说的堆栈技术，假如z-index和position都不在包罗范畴之内，z-index规则是十分简便的，然而在实际中，在html中显现的次序是一样的，假如当前属性包罗在内的话，子元素都会在非定位中显示。

例如：

HTML代码：
<div>
    <span class="red">Red</span>
</div>
<div>
    <span class="green">Green</span>
</div>
<div>
    <span class="blue">Blue</span>
</div>

CSS代码：

.red,.green,.blue{position:absolute;}
.red{background:red;z-index：1;}
.green{background:green;}
.blue{background:blue;}

以上代码有三个div，并且每一个div都包括一个class，每一个span都会有一个对应的色彩，当我们把span放置到文档的左上角，其他的色彩就会被重叠，当我们把第一个span设定为1，并且其他两个不去设定值，就会显现以下结果：

二：堆栈上下文

当前，堆栈可以在元素中构成，并且有三种办法

1.当一个元素是为文档的根元素的时候

2.元素有一个position值和z-index值

3.并且要求opacity值小于1

三：全局堆栈次序

在理解堆栈上下文之后，再去理解全局堆栈次序，大概就不会有那么难了，假如包括两个堆栈上下文的话，当我们增加父节点上，这时候就会构成第三个上下文，那么，z-index只能显示到第三个堆栈上下文，这就是我们所说的全局堆栈次序。

以上就是对zindex的堆叠次序是如何回事？zindex的堆叠次序详解的全部介绍，假如你想理解更多有关HTML视频教程，请关注百分百源码网。

以上就是zindex的堆叠次序是如何回事？zindex的堆叠次序详解的具体内容，更多请关注百分百源码网其它相关文章！