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;} 

三：全局堆栈顺序

在了解堆栈上下文之后，再去了解全局堆栈顺序，可能就不会有那么难了，如果包含两个堆栈上下文的话，当我们添加父节点上，这时候就会形成第三个上下文，那么，z-index只能显示到第三个堆栈上下文，这就是我们所说的全局堆栈顺序。

以上就是对zindex的堆叠顺序是怎么回事？zindex的堆叠顺序详解的全部介绍，如果你想了解更多有关 HTML视频教程 ，请关注Gxl网。

以上就是zindex的堆叠顺序是怎么回事？zindex的堆叠顺序详解的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于zindex的堆叠顺序是怎么回事？zindex的堆叠顺序详解的详细内容...