侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

css – 绝对位置和错误的z-index

2022-12-27 星期二 / 0 评论 / 0 点赞 / 27 阅读 / 1600 字

情节说明:有一只鸟在飞行前应该收集它的腿.鸟的身体,腿和眼睛是不同div的背景图像.我使用jQuery的动画方法来改变腿的位置并将它们放在鸟的身体内. 问题:没有腿在鸟的身体下面,它们会保持在它

... . . 情节说明:有一只鸟在飞行前应该收集它的腿.鸟的身体,腿和眼睛是不同div的背景图像.我使用jQuery的动画方法来改变腿的位置并将它们放在鸟的身体内.

问题:没有腿在鸟的身体下面,它们会保持在它的上方.

问题:我做错了什么让鸟的腿不在它下面?

图片:

>
>

HTML:

<div id="gonji">    <div class="legs"></div>    <div class="body">        <div class="eye"></div>    </div></div>

CSS:

#gonji { width: 80px; height: 55px; position: relative; }#gonji .body { width: 80px; height: 55px; background: url('../gonji/gonji.png') no-repeat scroll center center transparent; z-index: 998; }#gonji .eye { width: 5px; height: 4px; background: url('../gonji/gonji_eye.png') no-repeat scroll center center transparent; position: absolute; top: 13px; left: 30px; z-index: 999; }#gonji .legs{ width: 9px; height: 17px; background: url('../gonji/gonji_legs.png') no-repeat scroll center center transparent; position: absolute; top: 35px; left: 30px; z-index: 1 }

JS:

var $gonjiLegs = $("#gonji").find(".legs");var gonjiOrigLegsPos = $gonjiLegs.position();$gonjiLegs.animate({ 'top': gonjiOrigLegsPos.top - 17 },'fast');
.

解决方法

. 你错过了#gonji .body上的一个位置属性.z-index只适用于定位元素

尝试添加位置:相对;

. . .. ...

广告 广告

评论区