关于肚腩的问题
来源：2-11 汉克狗的腿和脚
是鹿呦呦呀
2020-05-16 11:03:00
老师您好，这是我的代码，我觉得通过设置.body和.leg的z-index属性就可以实现遮盖 不需要用肚腩 可是z-index似乎没起作用，我不知道问题出在哪里，请您帮我看一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/dog.css">
<style>
:root{
--hl: #1b2f90;
--bg: #f9f9f6;
--t:1.5s;
}
body{
background: url(img/bg.png) no-repeat center top;
background-size: cover;
}
.dog{
width: 300px;
height: 400px;
position: relative;
top: 380px;
}
.center{
position: absolute;
left:50%;
transform: translate(-50%,0);
}
.forehead{
width: 102px;
height: 48px;
background: var(--bg); /*调用CSS变量的方法 */
border-radius: 51px / 40px 40px 8px 8px;
z-index: 1;
}
.face{
width: 110px;
height: 68px;
background: var(--bg);
top: 20px;
border-radius: 50%;
z-index: 1;
}
.chin{
z-index: 1;
width: 104px;
height: 36px;
background: var(--bg);
top: 60px;
border-radius: 52px / 0 0 36px 36px;
}
.ear{
width: 16px;
height: 70px;
background: var(--hl);
border-radius: 50%;
position: absolute;
left: 50%;
top: 34px;
transform: translate(-42px,0) rotate(10deg);
z-index: 0;
transform-origin: 50% 0;
animation:rotate var(--t) ease-out infinite;
}
.ear.right{
transform: scale(-1,1) translate(-26px,0) rotate(10deg) ;
animation:rotate-r var(--t) ease-out infinite;
}
.eye{
width: 24px;
height: 24px;
background: var(--bg);
border-radius: 12px/13px 12px 12px 2px;
position: absolute;
left: 50%;
top: 20px;
transform-origin: 50% 0;
transform: translate(-42px,0) rotate(10deg);
z-index: 2;
box-shadow: 1px 0 0 0 #000 inset,-1px 0 5px 1px #ddd;
overflow: hidden;
}
.birthmark{
width: 30px;
height: 36px;
background: var(--hl);
border-radius: 15px/17px 23px 2px 13px;
position: absolute;
left: 50%;
top: 10px;
transform: translate(13px,0) rotate(-10deg);
z-index: 1;
transform-origin: 50% 0;
}
.pupil{
width: 26px;
height: 26px;
background: #e79101;
border-radius: 50%;
position: absolute;
left: 4px;
top: 1px;
box-shadow: 0 0 8px 0 #000 inset;
animation: translate var(--t) ease-out infinite;
}
.pupil::before{
content: '';
width: 18px;
height: 18px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.pupil::after{
content: '';
width: 5px;
height: 5px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 3px;
top: 7px;
}
.eye.right{
transform: scale(-1,1) translate(-16px,0) rotate(10deg);
box-shadow: 1px 0 0 0 #000 inset;
}
.nose{
width: 62px;
height: 32px;
position: absolute;
top: 42px;
background-color: #363035;
z-index: 3;
border-radius: 31px/10px 10px 22px 22px;
}
.nose:before {
content: '';
width: 60px;
height: 12px;
opacity: 0.8;
opacity: .6;
background: linear-gradient(30deg, #fff 0%, #fff 8%, #b1aeb1 15%, #b1aeb1 50%, #544d53 100%);
position: absolute;
left: 1px;
top: 1px;
border-radius: 30px / 10px 10px 2px 2px;
}
.nostril{
position: absolute;
width: 15px;
height: 4px;
background: linear-gradient(347deg, #363035 0%, #000 50%, #000 100%);
box-shadow: -1px -1px 3px 0px #363035 inset;
left: 10px;
top: 22px;
transform: rotate(39deg);
border-radius: 8px / 2px 4px 0px 2px;
animation: resize var(--t) ease-out infinite;
}
.nostril.right{
transform: scale(-1,1) translate(-27px,0) rotate(39deg);
animation: resize var(--t) ease-out infinite;
}
.mouth {
width: 68px;
height: 27px;
position: absolute;
left: 151px;
top: 62px;
border-radius: 36px / 0px 0px 27px 27px;
background: #671316;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.6) inset;
animation: mouth var(--t) ease-out infinite;
z-index: 2;
}
.mouth:before {
content: '';
width: 68px;
height: 12px;
background: var(--bg);
position: absolute;
left: 0px;
top: 0px;
border-radius: 36px / 0px 0px 5px 5px;
box-shadow: -1px 7px 8px 2px rgba(155, 155, 155, 0.2);
z-index: 3;
}
.tongue {
width: 34px;
height: 14px;
background: #a2504f;
border-radius: 17px / 0px 0px 7px 7px;
position: absolute;
left: 50%;
top: 7px;
margin: 0 0 0 -17px;
box-shadow: 0px 0px 4px 0px rgba(143, 32, 33, 1) inset;
animation: tongue var(--t) ease-out infinite;
z-index: 2;
}
.teen {
width: 8px;
height: 3px;
border-radius: 4px/0 0 0px 1px;
background: var(--bg);
position: absolute;
left: 50%;
top: 12px;
transform: translate(-8px,0);
border-right: .5px solid #ddd;
z-index: 3;
}
.teen.right{
transform: scale(-1,1);
}
.body{
width: 66px;
height: 70px;
background:var(--bg);
top: 89px;
z-index: 2; /* 这个属性没有起作用 */
border-radius: 50%;
}
.arm{
width: 26px;
height: 40px;
background: var(--bg);
top: 8px;
left: 50%;
position: absolute;
border-radius: 13px / 20px 0 14px 20px;
transform: translate(-43px,0) rotate(21deg);
}
.arm::before{
content: '';
width: 5px;
height: 20px;
border-radius: 5px/10px 0 0 10px;
box-shadow: -1px 0px 0px 0px #b1aeb1;
position: absolute;
right: 9px;
top: 10px;
transform: rotate(-5deg);
}
.arm.right{
transform: scale(-1,1) translate(-19px,0) rotate(21deg);
}
.leg{
width: 29px;
height: 50px;
position: absolute;
left: 50%;
z-index: 0; /* 这个属性没有起作用 */
top: 40px;
background: linear-gradient(-90deg, #eee 0%,#eee 20%,var(--bg) 20%,var(--bg) 100%);
border-radius: 15px / 5px 5px 15px 45px;
transform: translate(-32px,4px);
}
.leg.right{
transform: scale(-1, 1) translate(-3px,4px);
}
.foot{
width: 29px;
height: 15px;
background: linear-gradient(227deg, #ddd 0%, #fff 30%,#fff 100%);
border-radius: 15px / 10px 10px 5px 5px;
transform: translate(-1px,36px);
position: absolute;
}
.belly{
z-index: 2;
width: 60px;
height: 36px;
position: absolute;
bottom: 0px;
left: 33px;
background: linear-gradient(0deg, #ddd 0%, var(--bg) 20%, var(--bg) 100%);
border-radius: 33px / 0px 0px 35px 35px;
}
@keyframes rotate {
0%{
transform:translate(-42px,0) rotate(10deg);
}
50%{
transform:translate(-42px,0) rotate(30deg);
}
100%{
transform:translate(-42px,0) rotate(10deg);
}
}
@keyframes rotate-r {
0%{
transform: scale(-1,1) translate(-26px,0) rotate(10deg);
}
50%{
transform: scale(-1,1) translate(-26px,0) rotate(30deg);
}
100%{
transform: scale(-1,1) translate(-26px,0) rotate(10deg);
}
}
@keyframes translate {
0%{
left: 3px;
}
50%{
left: 6px;
}
100%{
left: 3px;
}
}
@keyframes resize{
0%{
height: 4px;
}
50%{
height: 3px;
}
100%{
height: 4px;
}
}
@keyframes tongue{
0%{
height: 14px;
}
50%{
height: 20px;
}
100%{
height: 14px;
}
}
@keyframes mouth{
0%{
height: 27px;
}
50%{
height: 20px;
}
100%{
height: 27px;
}
}
</style>
</head>
<body>
<div class="dog center">
<div class="forehead center"></div>
<div class="face center"></div>
<div class="chin center"></div>
<div class="ear"></div>
<div class="ear right"></div>
<div class="eye">
<div class="pupil">
</div>
</div>
<div class="birthmark"></div>
<div class="eye right">
<div class="pupil">
</div>
</div>
<div class="nose center">
<div class="nostril"></div>
<div class="nostril right"></div>
</div>
<div class="mouth center">
<div class="teen"></div>
<div class="teen right"></div>
<div class="tongue"></div>
</div>
<div class="body center">
<div class="arm"></div>
<div class="arm right"></div>
<div class="leg">
<div class="foot"></div>
</div>
<div class="leg right">
<div class="foot"></div>
</div>
<!-- <div class="belly center"></div> 为了测试z-index属性就注释掉了 -->
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，关于你的问题，回答如下：
1、z-index正常是设置兄弟元素直接的层级的。而这里是父子元素，不能直接设置。
2、不过父子元素设置的话，可以将子元素设置为-1，降低层级，父级就可以覆盖到子元素上，可以参考如下：
3、不过，这样的方式并不适用于本节的代码，是因为代码中使用了，transform。
同时使用z-index和transform会让z-index失效。
建议：可以使用课程中的方式实现。
祝学习愉快~
3
相似问题