1.一般嵌套在内层标签的在上层。按排版，后插入的标签在上层。
2.当用position定位后的元素，可以用z-index来设置标签的层次，哪个标签z-index属性值大，那个标签在最上层。
例如：
例子1：因为div2是后插入的标签，所以默认情况下在最上层，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<title>Document</title>
<style>
.div1{position: absolutewidth: 200pxheight: 100pxbackground:red}
.div2{position: absolutewidth: 100pxheight: 200pxbackground:blue}
</style>
</head>
<body>
<div class="div1">；这是div1</div>
<div class="div2">；这是div2</div>
</body>
</html>；显示效果为：
例子2：但设置了z-index的值后，如下，div1的z-index值大于div2的，则div1在上层。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<title>Document</title>
<style>
.div1{position: absolutewidth: 200pxheight: 100pxbackground:redz-index: 2}
.div2{position: absolutewidth: 100pxheight: 200pxbackground:bluez-index: 1}
</style>
</head>
<body>
<div class="div1">；这是div1</div>
<div class="div2">；这是div2</div>
</body>
</html>；显示效果为：
注：要想设置某个层在最上层，直接设置标签z-index的值为一个较大的数就行
1、新建一个html文件，命名为test.html
2、在test.html文件内，使用css设置页面所有的div宽度为300px，高度为300px，div的位置为绝对定位。
3、在test.html文件内，创建三个div，并用文字标识，分别为底层div、中层div、最顶层div。
4、在test.html文件内，分别给三个div设置class属性为one、two、three，用于下面对类名进行样式设置。
5、在css标签内，设置类名为one的div样式，设置其背景颜色为红色，距离页面左边缘为0，距离页面上边缘为0，同时使用z-index设置其层级为1。
6、在css标签内，设置类名为two的div样式，设置其背景颜色为黄色，距离页面左边缘为50px，距离页面上边缘为50px，同时使用z-index设置其层级为2，即在类名为one的div的上面。
7、在css标签内，设置类名为three的div样式，设置其背景颜色为粉红色，距离页面左边缘为100px，距离页面上边缘为100px，同时使用z-index设置其层级为3，即在页面三个div中的最顶层。
8、在浏览器打开test.html文件，查看实现的层级效果。
首先将position定义为，absolute、relative或fixed。【必须position为以上三个属性，z-index才能层级体现出来，才能起作用】
设置 style 中 z-index:auto
auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:9999。
若定义为-1，代表为最底层。
如果要让div1不被div2遮挡，则将div1的z-index设置比div2大就可以了。
看个例子
先写的粉色div，后写的灰色div，但通过 z-index 可以让粉色div在灰色div之上
原文链接： https://blog.csdn.net/redaiyuqun/article/details/54379354
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）