在css中，可以 利用 z -i ndex属性来设置层级，该属性可以设置元素的 堆叠顺序 ，拥有更高 堆叠 顺序的元素总是会处于堆叠顺序较低的元素的前面；语法格式“z-index:数值;”，允许使用负值。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
在css中，可以利用z-index属性来设置层级。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（Z-index 仅能在定位元素上奏效）。
做过页面布局的 同学 对z-index属性 应该 是很熟悉了，z-index是针对网页显示中的一个特殊属性。因为 显示器 是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
z-index值 较大 的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为 正数 的对象会在其之上，而 z-index 值为负数的对象在其之下。
简单 演示
<div style="width:200px;h ei ght:200px;"></div>
<div style="pos IT ion:relative; top:-50px; width:100px;height:100px;"><div>两个DIV，第二个向上移动50px， 正常 情况应该是这样的
第二个div遮住了第一个div，对第二个添加z-index属性
<div style="width:200px;height:200px;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;z-index:-5;"><div>结果就会变成这个样子，z-index 最简单的应用就是这样
只对定位元素有效
z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于 显示屏 方向 （称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。
<div style="width:200px;height:200px;z-index:30"></div> <div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>
虽然第一个p的z-index比第二个p大，但是由于第一个p未定位，其z-index属性未起作用，所以仍然会被第二个p覆盖。
相同z-index谁上谁下
相同的z-index其实有两种情况
1.如果两个元素都没有定位发生位置重合现象 或者 两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
<div style="position:relative;width:200px;height:200px;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;"><div>
2.如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素
<div style="position:relative;top:50px;width:200px;height:200px;"></div> <div style=" width:100px;height:100px;"><div>
父子关系处理
如果父元素z-index有效，那么子元素无论 是否 设置z-index都和父元素一致，会在父元素上方
<div style="position:relative;width:200px;height:200px;z-index:10;">
<div style="position:relative;width:100px;height:100px;z-index:-5;"><div>
</div>虽然子元素设置z-index比父元素小，但是子元素仍然出现在父元素上方
如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置 生效
<div style="position:relative;width:200px;height:200px;">
<div style="position:relative;width:100px;height:100px;z-index:-5;"><div>
</div>子元素z-index=-5生效，被父元素覆盖
兄弟之间子元素
如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定
<div style="position:relative;width:100px;height:100px;z-index:5;">
<div style="position:relative;width:50px;height:250px;z-index:50;"></div>
</div>
<div style="position:relative;width:100px;height:100px;z-index:10 ;m arg in -t op:4px;">
<div style="position:relative;width:30px;height:150px;z-index:-10;"></div>
</div>虽然第一个div的子元素的z-index比较高，但是由于其父元素z-index比第二个div低，所以第一个div子元素会被第二个div及其子元素覆盖
（学习视频分享：css视频教程）
以上就是css层级关系怎么设置的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 css层级关系怎么设置 全部内容，希望文章能够帮你解决 css层级关系怎么设置 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。