jQuery - 爲什麼總是將div放在頂部？

Question

我想要一個div作爲背景圖片。 div是通過jquery添加的。雖然它的Z指數爲零，但它始終位於頂端。我怎麼能放在後面？

js fiddle

JS

$('#wrap').append(  


    $('<div />').addClass("box") 


); 

CSS

.box{ 
width: 500px; 
height: 100px; 
background: green; 
opacity: 0.7; 
position: absolute; 
top:0; 
z-index:0; 
} 

Answer 1

你可以設置你的內容的z索引以及

.content { 
    position: relative; 
    z-index: 1; 
    .... /* the rest of the css */ 
} 

這將解決問題以及。

Amit Soni的評論（以及所有新答案）也應該可以工作，但是設置一個負Z指數可能會給可能的背景帶來問題。

Answer 2

改變你的z-index如下：

.box{ 
width: 500px; 
height: 100px; 
background: green; 
opacity: 0.7; 
position: absolute; 
top:0; 
z-index:-1000; 
} 

代碼在這裏：http://jsfiddle.net/N84Js/4/

因爲默認情況下兩者的div被設置爲z-index的0

Answer 3

絕對定位的div有一個更高的優先級比相對股利，你有沒有嘗試給它一個負Z指數？

Answer 4

默認情況下，兩個div的z-index = 0。所以嘗試給你想在背景上顯示的div的負z-index。看小提琴here

.box{ 
    width: 500px; 
    height: 100px; 
    background: green; 
    opacity: 0.7; 
    position: absolute; 
    top:0; 
    z-index:-1; 
}