html - 分层 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、left、bottom 或 来定位元素right。通常您设置 top 或 bottom 属性以及水平位置(即 left 或 right)。相对定位总是相对于它的父元素，通常你想在已经绝对定位的父元素中使用它。固定定位将确保定位的元素始终保持可见，无论用户是否滚动离开。根据我的经验，这对于粘性导航菜单很有用。

因为你没有为 .container 使用绝对定位，我选择让它相对，然后给它一个 z-index 高于 头带。

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