Javascript Div设置为后z索引（如果不是位置）：绝对/固定

我有一个问题，在我的另一个网站上，这一切对我来说都是可行的，但对我的新网站来说，它不是。但这是我的问题，我试图在我的网站上有不同的部分，所以我没有设置任何值的部分的位置，例如顶部，左侧。我不会在CSS或任何东西中给他们一个

position:absolute

，因为我希望他们“堆叠”

但是现在，他们在我的网站上做所有的事情，好像z指数低于其他的，但这肯定不是因为我玩了多少

这是我的代码和

HTML

CSS

可能是一个非常愚蠢的问题，有人会很容易知道答案，但我被难住了。提前谢谢大家的帮助

---

**我现在知道z-index对非定位元素不起作用，但我如何才能让这个网站的内容起作用呢？我让它像我想要的那样工作，我无法发现我做了什么不同

在规范中，元素必须定位才能具有z索引

要点，注意事项
仅适用于定位图元（位置：绝对；位置：相对；或位置：固定；）

您需要应用

位置：相对如果不想使用
位置：绝对


您还可以通过对背景应用负z索引来归档相同的效果，因此不需要对其他元素设置任何z索引或定位


我不确定您希望
#section2
显示在哪里，但要使其在堆叠顺序中可见，只需按如下方式设置
位置：相对
：

#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;
}

请参见演示：

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

效果不错，很好的使用了CSS3技术！继续做好工作。
好的，但是我的另一个网站没有z-index，但我使用相同的原则。你知道我如何在不使用定位的情况下显示我的内容吗？不，你在上面提到的链接上应用了
position:absolute
，请再次阅读我的答案，并查看小提琴请修复你的小提琴，你没有打开jQuery，请看：我注意到一件事，你不应该这样做。在更改样式之前，解析您的坐标并检查
如果（newValue！=oldValue）
，这会产生魅力！
$(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);
            }
        });
    });

}); 

#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;
    }

#bg_blur {
    background: url(http://s7.postimg.org/lyra1ksah/bg_blur.jpg) no-repeat right top;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; <-----
}

<div id="section1">
    NOTICE THAT THIS TEXT IS NOT VISIBLE!
        <div id="welcome">
          THIS IS VISIBLE
            <center><span id="hdh">HELLO, MY NAME IS DARRYL HUFFMAN AND I</span>
            ...

#section1 { /*Still invisible*/
    width: 100%;
    height: 100%;
    z-index: 4;
}

#welcome {
    position: absolute; /* THIS MAKE THE TEXT VISIBLE */
    ...
}

#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;
}