z-index
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意：
1 元素可拥有负的 z-index 属性值。
2 Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
z-index数值越大它的层叠等级就越高一些
一个小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body {
margin: 0;
}
.main {
width: 200px;
height: 200px;
background: #DD28A0;
position: absolute
}
.main2 {
width: 100px;
height: 100px;
background: #00d8a0;
position: absolute;
margin-left: 150px;
}
.main3{
width: 50px;
height: 50px;
background: black;
position: absolute;
margin-top: 70px;
margin-left: 180px;
}
</style>
<body>
<div class="main">
</div>
<div class="main2">
</div>
<div class="main3">
</div>
</body>
</html>效果图
白色的是背景图片
给main2 设置z-index=100 (数值时自己随意 给的)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body {
margin: 0;
}
.main {
width: 200px;
height: 200px;
background: #DD28A0;
position: absolute
}
.main2 {
width: 100px;
height: 100px;
background: #00d8a0;
position: absolute;
margin-left: 150px;
z-index: 100;
}
.main3{
width: 50px;
height: 50px;
background: black;
position: absolute;
margin-top: 70px;
margin-left: 180px;
}
</style>
<body>
<div class="main">
</div>
<div class="main2">
</div>
<div class="main3">
</div>
</body>
</html>效果图
在给main设置z-index为999
效果图
如下
扫一扫
893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
