舌头不能被遮住
来源：2-8 汉克狗的牙齿和舌头
hyperse
2019-04-02 15:19:12
上一个视频中老师说.mouth:before里面的position:absolute也可以写成display:block；就是要让该伪元素支持宽高（还是说触发BFC对吗？）可是这一节视频中即使设置了z-index,伪元素也盖不住牙齿是为什么呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cartoon dog</title>
</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="birthmark"></div>
<div class="eye">
<div class="pupil"></div>
</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 center"></div>
</div>
</div>
<style>
:root{
--hl:#1b2f90;
--bg:#f9f9f6;
}
body{
background: #ffc400;
}
.dog{
width: 300px;
height: 400px;
position: relative;
}
.center{
position: absolute;
left: 50%;
transform: translate(-50%,0);/* 把元素沿着x轴移动自身宽度的50%，一般是从左侧为开始点也就是0点。而数值是50%即是从左侧0点向左侧移动自身宽度的50%。 */
}
.forehead{
width: 102px;
height: 48px;
background: var(--bg);
/*position: absolute;
left: 50%;
transform: translate(-50%,0);*/
border-radius: 51px/40px 40px 8px 8px;
z-index: 1;
}
.face{
width: 110px;
height: 68px;
background: var(--bg);
border-radius: 50%;
top: 20px;
z-index: 1;
}
.chin{
width: 104px;
height: 36px;
background: var(--bg);
border-radius: 52px/0px 0px 36px 36px;
top: 60px;
z-index: 1;
}
.ear{
width: 16px;
height: 70px;
background: var(--hl);
border-radius: 50%;
position: absolute;
left: 50%;
top: 34px;
transform-origin: 50% 0;
transform: translate(-42px,0) rotate(10deg);
z-index: 0;
}
.ear.right{
transform:scale(-1,1) translate(-26px,0) rotate(10deg);/*水平翻转，scale要放在前面*/
}
.birthmark{
width: 30px;
height: 36px;
background: var(--hl);
border-radius: 15px/17px 23px 2px 13px;
position: absolute;
z-index: 1;/* 脸颊上方，眼眶下方 */
left: 50%;
top: 10px;
transform: translate(15px,0) rotate(-10deg);
}
.eye{
width: 24px;
height: 24px;
background: var(-bg);
border-radius: 12px/13px 12px 12px 2px;
position: absolute;
z-index: 2;
left: 50%;
top: 20px;
transform-origin: 50% 0;
transform: translate(-44px,0) rotate(10deg);
box-shadow:1px 0px 0px 0px #000 inset,-1px 0px 5px 1px #ddd;
overflow: hidden;
}
.eye.right{
/*z-index: 2;*/
transform: scale(-1,1) translate(-21px,0) rotate(10deg);
box-shadow: 1px 0px 0px 0px #000 inset;
}
.pupil{
width: 26px;
height: 26px;
background: #e79101;
border-radius: 50%;
position: absolute;
left: 3px;
top: 1px;
box-shadow: 0 0 8px 0 #000 inset;
}
.pupil:before{
content: "";
width: 18px;
height: 18px;
background: #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.pupil:after{
content: "";
width: 5px;
height: 5px;
background: #FFF;
border-radius: 50%;
position: absolute;
left: 3px;
top: 7px;
}
.nose{
width: 62px;
height: 32px;
top: 42px;
background: #363035;
border-radius: 31px/10px 10px 22px 22px;
z-index: 3;
}
.nose:before{
content: "";
width: 60px;
height: 10px;
position: absolute;
left: 50%;
top: 1px;
transform: translate(-50%,0%);
border-radius: 30px/8px 8px 2px 2px;
background: linear-gradient(30deg,#fff 0%,#fff 8%,#b1aeb1 15%,#b1aeb1 50%,#544d53 100%);
}
.nostril{
width: 15px;
height: 4px;
/*top: 19px;*/
background: #FFFFFF;
position: absolute;
left: 50%;
background: linear-gradient(0deg,#363035 0%,#000 100%);
border-radius: 50%;
transform:translate(-21px,19px) rotate(30deg);
}
.nostril.right{
transform:scale(-1,1) translate(-7px,19px) rotate(30deg) ;
}
.mouth{
width: 68px;
height: 27px;
background: #671316;
border-radius: 34px/0px 0px 27px 27px;
z-index: 1;
box-shadow: 0 0 4px 0 #000 inset;
top: 68px;
}
.mouth:before{
width: 68px;
height: 8px;
background: var(--bg);
border-radius: 34px / 0px 0px 5px 5px;
content: "";
/*position: absolute;*/
display: block;
z-index: 2;
}
.teen{
width: 8px;
height: 3px;
background: var(--bg);
border-radius: 4px / 0px 0px 0px 1px;
position: absolute;
left: 50%;
top: 7px;
transform: translate(-8px,0);
z-index: 1;
}
.teen.right{
transform: scale(-1,1) translate(0px,0);
border-right: .5px solid #ddd;
}
.tongue{
width: 34px;
height: 14px;
background: #a2504f;
border-radius: 17px / 0px 0px 7px 7px;
z-index: 0;
box-shadow: 0 0 2px 0 #111 inset;
top: 0px;
}
</style>
</body>
</html>
2回答
-
好帮手慕星星
2019-04-02
你好，.mouth:before里面的position:absolute也可以写成display:block；就是要让该伪元素支持宽高，触发BFC，可以这样理解，当时还没有添加显示层级，如果要添加显示层级的话，就需要使用定位了。
在正常文档流中元素设置显示层级没有效果，需要设置定位，把注释的定位代码解开就可以了：
祝学习愉快！
0 -
hyperse
提问者
2019-04-02
伪元素也盖不住舌头，说错啦
0
相似问题