一 叠放次序-同层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Document</title> -->
<style>
.div1 {
width: 300px;
height: 200px;
background-color: red;
position: absolute;
top: 20px;
left: 30px;
/* 当多个元素同时设置定位时，定位元素之间有可能发生重叠。 记住z-index值不加单位 */
/* 不写的 时候 默认为0 值愈大就越会层叠在上层 */
z-index: 1;
}
.div2 {
width: 200px;
height: 300px;
position: absolute;
background-color: blue;
z-index: 2;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
二 叠放次序-嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Document</title> -->
<style>
/* 不加z-index 默认子元素在上 */
/* 如果想要子元素在下 只能设置子元素z-index<0 */
/* 如果子元素不加z-index<0 无论父元素的z-index值有多大 子元素都会在父元素之上 */
/* 拓展： */
/* 父元素和其兄弟元素都没加z-index 后来者居上 */
/* 两者父元素都没加z-index 若某一子元素z-index值大 那么该子元素将显示在上方 如果值相同 则后来者居上 */
/* 如果父级都加了z-index 那么在进行比较时 只比较父元素z-index值 值越大则父元素连同里面的子元素越靠上 如果值相等 后来者居上 拼爹 */
.fa {
width: 300px;
height: 600px;
background-color: red;
position: relative;
z-index: 1000;
}
.sn {
width: 200px;
height: 300px;
background-color: blue;
position: absolute;
/* z-index: -1; */
/* z-index: 4; */
}
.faa {
width: 400px;
height: 200px;
background-color: #000;
position: relative;
z-index: 10001;
top: -100px;
}
.snn {
width: 300px;
height: 200px;
background-color: yellow;
position: absolute;
z-index: 4;
}
</style>
</head>
<body>
<div class="fa">
<div class="sn"></div>
</div>
<div class="faa">
<div class="snn"></div>
</div>
</body>
</html>
扫一扫
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
