為什么設置的z-index不能用？
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);
}
2017-09-20
要想給元素設置z-index樣式，必須先讓它變成定位元素，再通俗一點說，就是要給元素設置一個postion：relative
不要給想控制“上、下”的元素設置z-index，而是對他們的父容器設置z-index樣式。