为什么给body 的子类hand 设置z-index没有效果？
来源：2-14 项目作业
weixin_慕粉8323943
2019-09-10 13:42:19
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>rabit</title>
</head>
<body>
<div class="cloud1">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<div class="cloud2">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<div class="cloud3">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<div class="cloud4">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<div class="rabit lookUp">
<div class="ear center">
</div>
<div class="ear center right">
</div>
<div class="bread">
<div class="b1 center"></div>
<div class="b2 center"></div>
<div class="b3 center"></div>
</div>
<div class="bread right">
<div class="b1 center"></div>
<div class="b2 center"></div>
<div class="b3 center"></div>
</div>
<div class="head">
<div class="eye center">
<div class="pupil center"></div>
</div>
<div class="eye center right">
<div class="pupil center"></div>
</div>
<div class="nose center">
</div>
<div class="mouth center"></div>
<div class="mouth center right"></div>
</div>
<div class="body">
<div class="mainBody">
</div>
<div class="hand">
</div>
<div class="hand right">
</div>
<div class="leg">
<div class="legT">
</div>
<div class="legB">
</div>
</div>
<div class="tail">
</div>
</div>
</div>
<style>
:root{
--t1: 15s;
--t2: 23s;
--t3: 18s;
--t4: 16s;
}
body{
width: 100%;
height: 600px;
margin:0;
padding: 0;
background: linear-gradient( #036397 0%, #00ADEF 70%, #17505B 90%) no-repeat;
}
.cloud1{
position: relative;
/* transform: scale(0.4); */
width: 212px;
height: 159px;
left: -130px;
top: 10px;
float: left;
animation: move1 var(--t1) ease-in-out infinite;
}
.cloud2{
position: relative;
width: 212px;
height: 159px;
left: -90px;
top: 2px;
/* transform: scale(0.5); */
opacity: 0.8;
float: left;
animation: move2 var(--t3) ease-out infinite;
}
.cloud3{
position: relative;
width: 212px;
height: 159px;
left: -180px;
top: 20px;
/* transform: scale(0.2); */
opacity: 0.4;
float: left;
animation: move3 var(--t2) ease-out infinite;
}
.cloud4{
position: relative;
width: 212px;
height: 159px;
left: -80px;
top: 10px;
/* transform: scale(0.8); */
opacity: 0.6;
float: left;
animation: move4 var(--t1) ease-out infinite;
}
.c1{
background-color: #97B6D6;
position: absolute;
width: 106px;
height: 106px;
border-radius: 50%;
left: 50%;
top: 0;
transform: translate(-50%,0);
}
.c2{
background-color: #97B6D6;
position: absolute;
width: 106px;
height: 106px;
border-radius: 50%;
left: 0;
top: 29px;
}
.c3{
background-color: #97B6D6;
position: absolute;
width: 53px;
height: 47px;
border-radius: 50%;
left: 40px;
bottom: 5px;
}
.c4{
background-color: #97B6D6;
position: absolute;
width: 159px;
height: 106px;
border-radius: 50%;
left: 53px;
bottom: 0;
}
.center{
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
.lookUp{
position: absolute;
transform-origin: center top;
transform: rotate(45deg);
}
.rabit{
position: relative;
top: 400px;
}
.ear{
/* position: absolute; */
width: 22px;
height: 80px;
background: linear-gradient(to bottom, white 0%, rgb(146, 160, 186) 80%);
border-radius: 100px 100px 100px 100px / 120px 120px 320px 320px;
left:231px;
top:42px;
transform-origin: center bottom ;
transform: rotate(-15deg) scale(1.5);
}
.ear.right{
/* transform-origin: center bottom ; */
left:258px;
transform: scale(-1, 1) rotate(-15deg) scale(1.5);
}
/* .bread{
position: absolute;
} */
.bread .b1{
/* position: absolute; */
width: 42px;
height: 1.4px;
background: linear-gradient(90deg, transparent 10%, rgb(41, 41, 41) 50%, transparent 90%);
left:165px;
top:180px;
transform: translate(-5px, 0);
z-index: 2;
}
.bread .b2{
/* position: absolute; */
width: 42px;
height: 1.4px;
background: linear-gradient(90deg, transparent 10%, rgb(41, 41, 41) 50%, transparent 90%);
left:171px;
top:160px;
transform: translate(-5px, 0) rotate(30deg);
z-index: 2;
}
.bread .b3{
/* position: absolute; */
width: 42px;
height: 1.4px;
background: linear-gradient(90deg, transparent 10%, rgb(41, 41, 41) 50%, transparent 90%);
left:171px;
top:200px;
transform: translate(-5px, 0) rotate(-30deg);
z-index: 2;
}
.bread.right{
position: absolute;
transform: scale(-1, 1);
left: 480px;
z-index: 2;
}
.head{
position: absolute;
width: 110px;
height: 110px;
background-color: white;
border-radius: 60% / 80px 80px 50% 50%;
left:200px;
top:100px;
overflow: hidden;
z-index: 0;
}
.eye{
width: 25px;
height: 35px;
border-radius: 50% / 60% 60% 50% 50% ;
background-color: #737173;
top:40%;
transform: translate(-63.5px, 0) rotate(10deg);
}
.eye.right{
transform: scale(-1, 1) translate(10px, 0)rotate(10deg);
}
.pupil{
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
top: 8px;
left: 16px;
}
.nose{
width: 14px;
height: 12px;
background-color: #737173;
transform: translate(-33.5px, 0) scale(1.2);
top: 80px;
border-radius: 50% 50% 80% 80%/ 50% 50% 100% 100%;
/* border-top: 5px solid transparent;
border-bottom: 5px solid #737173;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50%; */
}
.mouth{
width: 20px;
height: 10px;
top: 90px;
border: 2px solid #737173;
border-top: none;
border-radius: 0 0 50% 50%/0 0 100% 100% ;
transform: translate(-45px, 0) scale(0.5);
}
.mouth.right{
border: 1px solid #737173;
border-top: none;
transform: scale(-1, 1) translate(28px, 0);
}
.body{
position: absolute;
transform-origin: left bottom;
width: 80px;
height: 120px;
border-radius: 70px 145% 147px 33px/ 89px 97% 158px 160px;
background: radial-gradient(circle at left center, white 30%, rgb(146, 160, 186) 98%);
top: 22px;
left: 273px;
transform: rotate(36deg) scale(0.8);
z-index: -1;
}
.body .hand{
position: absolute;
width: 30px;
height: 60px;
background: radial-gradient(circle at left bottom, rgb(146, 160, 186) 10%, white 98%);
transform: translate(60px,74px) rotate(-39deg);
border-radius: 79px 177px 159px 148px/ 92px 137px 186px 279px;
z-index: -2;
}
.body .hand.right{
transform: translate(41px,98px) rotate(-27deg) scale(0.9);
z-index: -3;
}
@keyframes move1{
0% {
transform: translate(110px, 0) scale(0.4)
},
5% {
transform: translate(220px, 0) scale(0.4)
}
55% {
transform: translate(550px, 0) scale(0.4)
}
100% {
transform: translate(1024px, 0) scale(0.4)
}
}
@keyframes move2{
0% {
transform: translate(110px, 0) scale(0.5)
},
5% {
transform: translate(220px, 0) scale(0.5)
}
55% {
transform: translate(550px, 0) scale(0.5)
}
100% {
transform: translate(1024px, 0) scale(0.5)
}
}
@keyframes move3{
0% {
transform: translate(110px, 0) scale(0.2)
},
5% {
transform: translate(220px, 0) scale(0.2)
}
55% {
transform: translate(550px, 0) scale(0.2)
}
100% {
transform: translate(1024px, 0) scale(0.2)
}
}
@keyframes move4{
0% {
transform: translate(110px, 0) scale(0.8)
},
5% {
transform: translate(220px, 0) scale(0.8)
}
55% {
transform: translate(550px, 0) scale(0.8)
}
100% {
transform: translate(1024px, 0) scale(0.8)
}
}
</style>
</body>
</html>
已经给body设置了z-index = -1 了， 我想把兔子的手放在body下面， 但是 即时设置了z-index为-2， 也没有用，为什么呢？
2回答
-
樱桃小胖子
2019-09-14
效果：
希望可以帮到你！
0 -
好帮手慕慕子
2019-09-10
同学你好， 因为hand是body的子元素， 子元素默认就是要显示在父元素的上面， 所以即使给父元素设置z-index值也无法让子元素在父元素下面显示。
另，同学代码中如下位置， 多谢了一个逗号， 不符合语法规范， 建议修改：
如果是作业的话， 可以直接引入兔子的图片即可哦
如果帮助了你， 欢迎采纳！
祝学习愉快~~~
0h019-09-13
相似问题