老师，我这里为什么嘴巴总是在鼻子上面啊？
老师，我这里不管怎么设置z-index，嘴巴总是显示在鼻子上面是什么原因啊？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>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="nose center">
<div class="nostril"></div>
<div class="nostril right"></div>
</div>
</div>
<!-- 嘴巴 -->
<div class="mouth center"></div>
<style>
:root{
--h1:#1b2f90;
--bg:#f9f9f6;
}
body{
background:orange;
}
.dog{
width:300px;
height:400px;
position:relative;
z-index:1;
}
.center{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
.forehead{
width:102px;
height:48px;
background:var(--bg);
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/0 0 36px 36px;
top:60px;
z-index:1;
}
.nose{
width:62px;
height:32px;
top:42px;
background:#363035;
z-index:3;
border-radius: 31px/10px 10px 22px 22px
}
.mouth{
width:68px;
height:25px;
background:#671216;
border-radius: 34px/ 0px 0px 27px 27px;
box-shadow:0 0 4px #000 inset;
top:78px;
z-index:1;
}
</style>
</body>
</html>
正在回答
同学你好，浏览器解析如下图所示， 在HTML结构中， 嘴巴所在的盒子在dog这个大盒子的外面，导致设置dog的z-index值也影响到了狗狗嘴巴和鼻子的显示
建议： 可以将嘴巴最在div放在dog这个大盒子下面， 然后调整嘴巴的top值
效果图：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星