絕對位置和錯誤的Z指數

劇情解釋：有一隻鳥應該在飛行前收集它的腿。鳥的身體，雙腿和眼睛分別是div s的background-image。我使用jQuery的動畫方法來改變腿部位置並將它們放入鳥體內。絕對位置和錯誤的Z指數

問題：而不是腿在鳥的身下，他們留在它的上面。

問題：我做錯了什麼，使鳥的腿不在它下面？

圖片：

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');

來源

2013-03-23 Farid Rn

你在#gonji .body缺少position屬性..的z-index只適用於定位的元素

嘗試增加position: relative;

來源

2013-03-23 15:56:18 user2129623

不錯！我不知道！我以爲'z-index'在任何地方都可以使用。謝謝... – 2013-03-23 15:57:51

您必須更改z-index。

z-index:-1; on .feet。

您可以保持相同的位置，只需更改.hide()和.show()。

來源

2013-03-23 15:53:42

我已經試過了'z-index：-1'，它可以工作，但是我擔心z-index會使用'-1'會導致另一個問題，當更多的元素保持在對方時。 – 2013-03-23 15:56:04

'hide（）'有什麼用？只是來來回回的問題！ – 2013-03-23 15:56:29

我的意思是說，你可以隱藏它們，而不是讓腿上下襬動，'display：none;'，然後你可以用jquery'.show（）'來顯示它們。 – 2013-03-23 15:58:35

CSS

#gonji { width: 80px; height: 55px; position: relative; } 
#gonji .body { width: 80px; height: 55px; background:red; z-index: 998; } 
#gonji .eye { width: 5px; height: 4px; background:blue; position: absolute; top: 13px; left: 30px; z- index: 999; } 
#gonji .feet { width: 9px; height: 17px; background:black; position: absolute; top: 55px; left: 30px; }

來源

2013-03-23 16:12:36 Venugopal

絕對位置和錯誤的Z指數

回答

相關問題