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-index

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

这也将解决问题。

Amit Soni的评论（以及所有新答案）也应该有效，但设置负z-index可能会给可能的背景带来问题。

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具有比相对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;
}