这篇文章主要介绍了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的堆叠顺序是什么内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
