验证z-index
为了验证z-index的作用，对上述代码进行修改，实例如下
分别把blue green red的z-index设置为999 99 9，但是看上去好像和之前没什么变化，原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。so 我们继续对css做一些修改：
如图所示，显示的顺序已经按照我们设置的z-index大小展现了
多个父元素中子元素的z-index设置
在原基础之上，我们对html和css做一些改动，验证一下父元素不同的情况下 ，子元素设置不同的z-index显示效果
可以很明显的看出，不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染.
（学习视频分享：css视频教程）
以上就是css怎么设置元素层次的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
