使用浮動div時需要z-index屬性

Question

我發現了一對或三個類似的問題但他們都在假定它只是缺乏位置：絕對/相對（非讀者請注意）。如果我的要求是使用float，然後嘗試爲解決z-index問題做一個解決方法，該怎麼辦？

http://jsfiddle.net/LcwVx/1/

我有一個透明的圖像。我想在div上浮動以便透明或在父窗體後面使用z-index。我不想改變css中的調用順序，也不改變attirbutes的位置。有沒有什麼辦法（jQuery或其他）來解決這種情況？

#parent { 
    width:200px; 
    height:300px; 
    float:left; /* Requirement */ 
    border: 1px solid; 
    background: url('https://cdn1.iconfinder.com/data/icons/ball/256/transparent.png') no-repeat top left; //ICON HAS TRANSPARENCY 
} 

#child { 
    float:right; /* Requirement */ 
    height:60px; 
    width:100px; 
    border: 1px solid; 
    background-color: orange; 
    z-index: -1; //THIS IS WHAT I WOULD LIKE TO DO 
} 

Answer 1

我知道你要使用的花車來定位它。然而，如果沒有給出上/左/右/下的位置，給孩子添加position:relative;，你應該得到你想要的。

如果沒有位置設置，則z-index屬性不會有任何影響。

http://jsfiddle.net/LcwVx/6/

Answer 2

z-index只適用於定位的元素，因此只需添加position:relative;您#child股利。

jsFiddle example