如果没有位置，则将Div设置为返回z-index：绝对/固定

Question

我有一个问题，在我的另一个网站上，这一切对我都有效，但对于我的新网站却没有。 但是，这是我的问题，我试图在我的网站上设置不同的版块，因此，我不会将这些版块的位置设置为任何附加值。 左上方。 我没有给他们一个postion:absolute是CSS或其他任何东西，因为我希望他们“堆叠”。

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

这是我的代码， 请单击此处以获取JSFiddle上的UPDATED示例。

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不适用于非定位元素，但是如何使该网站的内容正常工作？ 我在此站点上的运行方式就像我想要的一样，我无法找到我所做的不同工作。

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技术！ 保持良好的工作。

Answer 2

在规范中， 必须将元素放置为具有z索引。

CSS /属性/ z索引

点，注意
仅适用于定位的元素（位置：绝对；，位置：相对；或位置：固定；）。

您需要申请position: relative; 如果您不想使用position: absolute; 。

---

您还可以通过将负z-index应用于背景来存档相同的效果，因此您无需为其他元素设置任何z-index或位置。

http://jsfiddle.net/qSC7N/5/

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

资源：

• http://www.w3.org/wiki/CSS/Properties/z-index
• http://docs.webplatform.org/wiki/css/properties/z-index
• https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

---

编辑基于评论

在darrylhuffman.com页面上，您使用的是相同的技术，但#section1仍然不可见。 #section1内部的文本从其父级继承了z-index:4 ，并且您应用了position:absolute; #welcome使其可见。

http://jsfiddle.net/UF9Bf/

<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 */
    ...
}