Question

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

通过观察它你可以看到一个背景图像 - 在它上面是两个蓝色的盒子和略微透明的黑盒子。我要求盒子在两个盒子的后面，但在背景图像的顶部。

现在我尝试为所有元素分配一个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

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

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

如果您不熟悉这些内容，可以详细了解here。 this blog post详细说明了z-index和定位如何协同工作。

Answer 2

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

.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的{{1}}。

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

分层divs排序

2 个答案: