在z軸上排列div

Question

我想要一個div在另一個div下。在這個例子中，我想#under去#box。我已經玩過z-index，但是我無法實現它，我想這與我的標記排列方式有關。

我的問題是 - 是否有可能使#under在#box下不改變標記？

您可以在這裏看看我的例子：http://jsfiddle.net/timkl/hrsHY/

這是我的HTML：

<div id="main-content"> 

    <div id="box"> 
     <h2>box</h2> 
    </div><!-- /box --> 

</div><!-- /main-content --> 

<div id="under"> 
    <h2>under</h2> 
</div><!-- /under--> 

<div id="footer"> 
    <h2>footer</h2> 
</div><!-- /footer --> 

這是我的CSS：

#container { 
    font-family: Helvetica; 
    color: #ccc; 
    font-weight: bold; 
    } 


#main-content, #box, #footer, #under { 
    padding: 16px; 
    } 


#box { 
    background: #F3F3F1; 
    height: 200px; 
} 

#under { 
    height: 40px; 
    background: orange; 
    margin-top: -100px; 
    z-index: -10; 
    opacity: .7; 
    color: brown; 
    } 

#footer { 
    background: #F3F3F1;  
} 

Answer 1

Z-index只適用於絕對定位。

#container { 
     font-family: Helvetica; 
     color: #ccc; 
     font-weight: bold; 
     position: absolute; 
    } 

    #under { 
     height: 40px; 
     background: orange; 
     margin-top: -100px; 
     z-index: -10; 
     opacity: .7; 
     color: brown; 
     position: absolute; 
     } 

當你想要他們的相對定位（如現在的位置是：相對;）你可以放置它們，你相對定位獲得兩個div的組合的相對位置周圍的專區內絕對的。

Answer 2

你z-index版元素需要有一個位置z-index申請。嘗試使用z-index將position: relative添加到每個div。

#under { 
    height: 40px; 
    background: orange; 
    margin-top: -100px; 
    z-index: -10; 
    opacity: .7; 
    color: brown; 
    position: relative; 
}