为什么设置的z-index不能用？
qq_qwertyuiop_24185030
2017-09-09 13:34
body{background: #ccc}
h1{
text-align: center;
}
.chao{
width: 960px;
height: 200px;
margin: 60px auto;
position:relative;
border: 0.5px dashed #ccc
}
img{padding:10px 10px 15px;
background: #fff;
border: 1px solid #ddd;
position: absolute;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 0.5s;
z-index:1;
}
img:hover{
background: #fff;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
box-shadow: 10px 10px 15px #ccc
z-index:2000;
}
.pic1{
left: 200px;
top: 0px;
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
transform:rotate(-15deg);
}
.pic2{
left: 350px;
top: 10px;
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
transform:rotate(15deg);
}
.pic3{
left: 700px;
top: 50px;
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
transform:rotate(30deg);
}
.pic4{
left: 500px;
top: 30px;
-webkit-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
transform:rotate(-25deg);
}
.pic5{
left: 0px;
top: 200px;
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
transform:rotate(15deg);
}
.pic6{
left: 200px;
top: 200px;
-webkit-transform:rotate(55deg);
-moz-transform:rotate(55deg);
transform:rotate(55deg);
}
.pic7{
left: 400px;
top: 200px;
-webkit-transform:rotate(-35deg);
-moz-transform:rotate(-35deg);
transform:rotate(-35deg);
}
.pic8{
left: 600px;
top: 200px;
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
transform:rotate(15deg);
}
.pic9{
left: 700px;
top: 200px;
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
transform:rotate(-15deg);
}
.pic10{
left: 0px;
top: 0px;
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
transform:rotate(-15deg);
}
1回答
-
- 慕粉3248143
- 2017-09-20 13:52:10
要想给元素设置z-index样式，必须先让它变成定位元素，再通俗一点说，就是要给元素设置一个postion：relative
不要给想控制“上、下”的元素设置z-index，而是对他们的父容器设置z-index样式。
CSS3绚丽照片墙
56605 学习 · 63 问题
相似问题