javascript - 如果不是位置 :absolute/fixed，则 Div 设置为后退 z-index

Question

我有一个问题，在我的其他网站上，这一切都适用于我，但对于我的新网站，它不是。但这是我的问题，我试图在我的网站上有不同的部分，所以我没有将位置设置为具有任何值 ex 的部分。左上方。我不会在 CSS 或其他任何东西中给它们 postion:absolute，因为我希望它们“堆叠”。

但现在，他们在我网站上的所有内容后面，好像 z-index 低于其他的，但这绝对不是我玩了多少。

这是我的代码，click here for an UPDATED example on JSFiddle.

HTML

<div id="bg_reg"></div>
<div id="bg_blur"></div>  
<div id="section2">You can't see this div.</div>

Javascript

$(function() {

    // hide #back-top first
    $("#bg_blur").hide();

    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 70) {
                $('#bg_blur').fadeIn(600);
            } else {
                $('#bg_blur').fadeOut(600);
            }
        });
    });

}); 

CSS

#section2{
    width:100%;
    background:url(../images/white.jpg) #FFF;
    -webkit-box-shadow: 0px 0px 30px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 30px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 30px rgba(50, 50, 50, 1);
z-index:150;
} 
#bg_reg {
        background: url(../images/bg_reg.jpg) no-repeat right top;
        background-size: cover;
        position: fixed;
        bottom: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        -webkit-transition: opacity 500ms;
        -moz-transition: opacity 500ms;
        -o-transition: opacity 500ms;
        -ms-transition: opacity 500ms;
        transition: opacity 500ms;
        z-index:0;
    }

    #bg_blur {
        background: url(../images/bg_blur.jpg) no-repeat right top;
        background-size: cover;
        position: fixed;
        bottom: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        z-index:0;
    }

可能是一个非常愚蠢的问题，有人会很容易地知道答案，但我很难过。提前感谢所有帮助!

**我现在知道 z-index 不会在非定位元素上工作，但我怎样才能让这个网站的内容工作？我让它像我想要的那样工作 This site而且我找不到我做了什么不同的事情。

Answer 1

我不确定您希望 #section2 出现在哪里，但要使其在堆叠顺序中可见，只需按如下方式设置 position: relative:

#section2 {
    position: relative;
    height:100px;
    width:100%;
    background:#FFF;
    -webkit-box-shadow: 0px 0px 30px rgba(50, 50, 50, 1);
    -moz-box-shadow: 0px 0px 30px rgba(50, 50, 50, 1);
    box-shadow: 0px 0px 30px rgba(50, 50, 50, 1);
    z-index:150;
}

参见演示:http://jsfiddle.net/audetwebdesign/HM5Ct/

设置 position: relative 使元素保持在文档流中，并允许它与固定和绝对定位的元素一起以新的堆叠顺序呈现。

不错的效果，很好的利用了CSS3技术!继续努力。