为啥耳朵z-index=0没有在下面被覆盖
来源：2-1 汉克狗头部轮廓和耳朵
Leonard_
2019-06-11 13:55:56
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
:root {
--hl: #1b2f90;
--bg: #f9f9f6;
}
body {
background: #ffc400;
}
.dog {
width: 300px;
height: 400px;
position: relative;
background: green;
}
.center {
position: absolute;
/* left是左移容器的50%，元素左边在容器水平中线，元素再translate(-50%,0)x轴水平左移自身的一半，达到居中效果 */
left: 50%;
transform: translate(-50%, 0);
}
.forehead {
width: 102px;
height: 48px;
background: var(--bg);
/* /前面是水平方向的圆角后面是竖直方向的 */
border-radius: 51px/40px 40px 8px 8px;
}
.face {
width: 110px;
height: 68px;
background: var(--bg);
border-radius: 50%;
top: 20px;
}
.chin {
width: 104px;
height: 36px;
background: var(--bg);
border-radius: 52px/0px 0px 36px 36px;
top: 60px;
}
.ear {
width: 16px;
height: 70px;
background: var(--hl);
border-radius: 50%;
position: absolute;
z-index: 0;
left: 50%;
top: 34px;
transform-origin: 50% 0;
transform: translate(-42px, 0) rotate(10deg);
}
.right{
transform: scale(-1,1) translate(-26px, 0) rotate(10deg);
}
</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>
</body>
</html>
1回答
-
同学你好！
因为耳朵也设置了一个绝对定位（设置绝对定位会自带的提高该元素的层级大小）
这里可以将z-index设置为负数，耳朵就被覆盖了
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题