老师，我的狗身体的z-index已经是零了，为什么还会挡住舌头嘴巴，不懂怎么调了

老师，我的狗身体的z-index已经是零了，为什么还会挡住舌头嘴巴，不懂怎么调了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>函数的间接调用</title>
    <style>
        /*放在根元素下，所有的变量都可以用到*/
        :root {
            --h1:#1b2f90;
            --bg:#f9f9f6;
            --t:2s;
        }
        body{background:#ffc400;}
        .dog{
            width: 300px;
            height: 400px;
            position: relative;
            background-color: pink;
        }
        .center{
            position: absolute;
            left: 50%;
            transform: translate(-50%,0);
        }
        .forehead{
            width: 102px;
            height: 48px;
            /*调用css变量需要用var来将这个变量传进去*/
            background-color: 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;
            /*调用css变量需要用var来将这个变量传进去*/
            background-color: var(--bg);
            border-radius: 50%;
            top: 20px;
            z-index: 1;
        }
        .chin{
            width: 104px;
            height: 36px;
            /*调用css变量需要用var来将这个变量传进去*/
            background-color: var(--bg);
            border-radius: 50%;
            top: 60px;
            border-radius:52px / 0px 0px 36px 36px;
            z-index: 1;
        }
        .ear{
            width: 16px;
            height: 70px;
            background: var(--h1);
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top:34px;
            transform-origin:50% 0;
            transform: translate(-32px,0) rotate(10deg);
            z-index:0;
            animation: rotate var(--t) ease-out infinite;


        }
        .ear.right{
            transform: scale(-1,1) translate(-17px,0) rotate(10deg) ;
            animation: rotate-r var(--t) ease-out infinite;
        }
        .birthmark {
            width: 30px;
            height: 36px;
            background: var(--h1);
            border-radius: 15px/ 17px 34px 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;
            left: 50%;
            top:20px;
            transform-origin:50% 0;
            transform: translate(-44px,0) rotate(10deg);
            z-index:2;
            box-shadow:1px 0px 0px 0px #000 inset,-1px 0px 5px 1px #ddd;
            overflow: hidden;

        }
       .eye.right{
            transform: scale(-1,1) translate(-21px,0) rotate(10deg) ;
            box-shadow:1px 0px 0px 0px #000 inset;


        }
        .pupil{
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background:#e79101;
            position: absolute;
            left: 3px;
            top:1px;
            box-shadow: 0 0 8px 0 #000 inset;
            animation: translate var(--t) ease-out infinite;

        }
        .pupil:before{

            width: 18px;
            height: 18px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            /*上下左右都要居中*/
            transform: translate(-50%,-50%);
            content:'' ;
            /*伪元素需要一个content*/
        }
        .pupil:after{
            width: 5px;
            height: 5px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
            left: 3px;
            top: 7px;
            content: '';
        }
        .nose{
            width: 62px;
            height: 32px;
            position: absolute;
            top: 42px;
            z-index: 3;
            left: 39%;
            background-color: #363035;
            border-radius: 31px / 10px 10px 22px 22px;
        }
        .nose:before{
            content: '';
            width: 60px;
            height: 15px;
            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: linear-gradient(0deg,#363035 0%,#000 100%);
            position:absolute;
            border-radius: 50%;
            left: 50%;
            transform: translate(-21px,0) rotate(30deg);
            animation: resize var(--t) ease-out infinite;
        }
        .nose .right{
            transform:scale(-1,1) translate(-7px,0) rotate(30deg) ;
        }
        .mouth{
            width: 68px;
            height: 27px;
            background-color: #671316;
            border-radius: 34px / 0px 0px 27px 27px;
            z-index: 1;
            box-shadow: 0 0  4px 0 #000 inset;
            top:67px;
            animation: open var(--t) ease-out infinite;
        }
        .mouth:before{
            width: 68px;
            height: 8px;
            background: var(--bg);
            border-radius: 34px / 0px 0px 5px 5px;
            content: '';
            position: absolute;
            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:1px 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 #000 inset;
            top: 0px;
            animation: extend var(--t) ease-out infinite;
        }
        .body{
            height: 70px;
            width: 66px;
            top: 22px;
            background: var(--bg);
            border-radius: 50%;
            z-index: 0;
        }
        .arm{
            width: 26px;
            height: 40px;
            background: var(--bg);
            position: absolute;
            top: 5px;
            left: 57%;
            border-radius: 13px /20px 0 14px 20px;
            transform: translate(-50px,0) rotate(21deg) ;


        }
        .arm:before{
            content: '';
            width: 5px;
            height: 20px;
            border-radius: 5px/ 10px 0px 0px 10px;
            box-shadow: -1px 0 0px 0 rgba(200,200,200,0.5);
            position: absolute;
            right: 6px;
            top: 14px;
            transform: rotate(-5deg);
        }
        .arm.right{
            transform:scale(-1,1) translate(-14px,0) rotate(16deg);
        }
        .leg{
            width: 29px;
            height: 50px;
            background: linear-gradient(-90deg,#ddd 0%,#ddd 8%,#fff 20% ,#fff 100%);

            position: absolute;
            top: 40px;
            left: 50%;
            border-radius:15px / 5px 5px 15px 45px ;
            transform: translate(-32px,0) ;
        }
        .leg.right{
            transform: scale(-1,1) translate(-3px,0);
        }
        .foot {
            width: 29px;
            height: 15px;
            background: linear-gradient(-120deg,#eee 0%,#bbb 8%,#fff 16% ,#fff 100%);
            bottom: -8px;
            position: absolute;
            left: 2px;
            border-radius:15px / 10px 10px 5px 5px ;
        }
        .belly{
            z-index:2 ;
            width: 60px;
            height: 36px;
            background: linear-gradient(0deg,#ddd 0%,#ddd 10%,#fff 30% ,#fff 100%);
            border-radius:30px / 0 0 36px 36px ;
            top:34px;

        }
        @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 extend{
                0%{height:14px;}
                50%{height:23px;}
                100%{height:14px;}
            }
        @keyframes open{
            0%{
                height:27px;
                border-radius: 34px / 0px 0px 27px 27px;
            }
            50%{
                height:20px;
                border-radius: 34px / 0px 0px 20px 20px;
            }
            100%{
                height:27px;
                border-radius: 34px / 0px 0px 27px 27px;

            }
        }

    </style>
</head>
<body>
<div class="dog">
    <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">
        <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 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>
        </div>
</div>


</div>
<script>
    // 在此处补充代码


</script>
</body>
</html>
慕移动0023355 2019-05-21
源自：项目：CSS3实现汉克狗案例   2-12 汉克狗最终动画效果
5
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕夭夭 2019-05-21 19:00:55

你好同学，代码中狗身体是嘴巴的子元素。你可以这样理解，当一个盘子里面装着东西，肯定是东西压在父元素盘子上面，所以这里即使设置子元素设置层级为0也是会压在父元素上面的。

http://img1.sycdn.imooc.com//climg/5ce3d8a5000141ec06580207.jpg

所以建议把身体的这块结构移动到外边来，如下：

http://img1.sycdn.imooc.com//climg/5ce3da43000130cb07250393.jpg

然后再调整一下身体的位置：

http://img1.sycdn.imooc.com//climg/5ce3da5d0001a05703760192.jpg

祝学习愉快 ，望采纳。

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为什么嘴巴是上面在动？
5 1 3
跟着老师敲的，舌头和嘴巴的z-index属性不起作用
0 0 4
老师为什么z-index:9;z-index:1;不是应该相差8吗怎么还会重叠呢
1 0 6
为什么给label设置z-index没有效果呢？
71 2 10
menu-box的z-index设置为1，小的显示在下面，那不就被banner盖住了吗？
6 0 5

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师