分层 div 排序

Question

我在分层 div 时遇到了一些困难。我已经创建了问题区域的样本。

My Fiddle

通过查看它，您可以看到背景图像 - 顶部是两个蓝色框和略微透明的黑色框。我要求该框位于两个框的后面，但位于背景图像的顶部。

现在我确实尝试为所有元素分配 z-index，但它没有改变任何东西？

<div class="hero">
    <div class="container"> 
        <div class="section group">
            <div class="col span_2_of_4">
                "headline here"
            </div>
        </div>
        <div class="section group">
            <div class="col span_1_of_4">
                sub head
            </div>
        </div>
    </div>


<div class="headerband"></div>    

</div>


.hero{
    position:relative;
    height:60%;
    background-image:url(http://asia.olympus-imaging.com/products/dslr/e520/sample/images/sample_03.jpg);
    background-size:cover;
    float: left;
    width: 100%;
}

.headerband{
    background-color: rgba(0,0,0,0.7); 
    height: 20%; 
    margin-top: -30px; 
    float:left; 
    z-index: -1; 
    width: 100%;
}

/* Main Container */
.container{
    margin: 0 auto;
    width: 960px;
    padding: 20px 0 0 0;            
}



/* Respinsive grid */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}



/*  Grid of four  */
.span_4_of_4 {
    width: 100%;
}
.span_3_of_4 {
    width: 74.6%;
    background-color: blue;     
}
.span_2_of_4 {
    width: 49.2%;
    background-color: #008394;
    color: #FFF;
    padding: 30px 20px 30px 20px;
    font-size: 30px;
    text-align:center;  
    margin-bottom: -10px;
    margin-top: 370px;
}
.span_1_of_4 {
    width: 28.8%;
    background-color: #00C1DB;
    color: #FFF;
    padding: 20px 20px 20px 20px;
    font-size: 15px;
    text-align:center;  
}

Answer 1

我通过这样做完成了你所需要的

.headerband{
    background-color: rgba(0,0,0,0.7); 
    height: 20%; 
    margin-top: -30px; 
    float:left; 

    /* Drop this line => z-index: 0;  */

    width: 100%;
}

.container{
    margin: 0 auto;
    width: 960px;
    padding: 20px 0 0 0;

    /* You can use a z-index of 1 or higher. I opted for 10 */
    position: relative;
    z-index: 10;
}

See updated fiddle

更新：

z-index 属性将不起作用unless you set the position property of the element。默认情况下，CSS position 属性为 static (Read more about the position property]。有效值为 absolute、relative 或 fixed，这允许您通过提供 top、@987654333 来定位元素@、bottom 或 right。通常您设置 top 或 bottom 属性以及水平位置（即 left 或 right）。相对定位始终相对 em> 到它的父元素，通常你想在一个绝对定位的父元素中使用它。固定定位将确保定位的元素始终保持可见，无论用户是否滚动离开。这个很有用，根据我的经验，用于粘性导航菜单。

由于您没有为.container 使用绝对定位，我选择将其设为相对，然后给它一个高于headerband 的z-index。

至于为什么我将.headerband 设置为非负值，这是我的设计决定。我总是使用 0 或更高的 z-indexes。您将在上面的链接中看到负 z-index 是有效的。对我来说，使用非负数更自然。 我注意到.headerband 没有使用绝对定位。我以为是。忽略这一段。

Answer 2

除非您在元素上也使用position 属性，否则z-index 属性将不起作用。例如：

position: fixed;
position: absolute;
position: relative;

如果您不熟悉这些功能，可以阅读更多相关信息here。 this blog post 详细介绍了 z-index 和定位如何协同工作。