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

изменения вы г-индекс следующим образом:

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

код здесь: http://jsfiddle.net/N84Js/4/

, потому что по умолчанию обе дивы установлены на Z-индекс 0

Answer 3

Absolute расположены дивы имеют более высокий приоритет чем относительные divs, вы пытались дать ему отрицательный индекс z?

Answer 4

По умолчанию два div имеют z-index = 0. поэтому постарайтесь дать отрицательный z-индекс для div, который вы хотите отображать на фоне. см. скрипку here

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