堆疊在彼此

Question

的div元素我有一個網站在佈局看起來是這樣的：（下圖）

在左側面板上，我有這顯示一個標誌一個div。我還有另一個div，我想放在logo下面，所以這些必須疊放在一起。我試着擺弄z-索引，但並沒有完全理解這些。 這怎麼辦？

Answer 1

嘗試也使用的位置是：絕對的;而不是相對於使用z-index時的兩個元素。然後它可以在你的佈局中產生一些扭曲，所以你可以把logo div放入另一個相對的div中，或者使用其他技術來修復它，但是它必須在使用絕對位置和z-index時工作。如果它仍然無法正常工作，請檢查您的某些javascript是否無干擾，或者您的代碼中是否有其他元素具有z-index，因此會導致問題。

如果使用絕對位置，不要忘記定義利潤率左和邊距。

Answer 2

嘗試使用margin屬性，如圖所示。如果您將margin-left作爲右側div的負值，那麼右側div會移動到徽標div的下方/上方。

Answer 3

如果z-index工作不適合你嘗試嵌套標誌<div>在包裝<div>像這樣

<div> <!--div container to hold the logo div--> 
<div><!--Logo div--></div> 
</div> 

Answer 4

我不知道你想達到但嘗試this，適應值，你的佈局

Answer 5

參考什麼：jsFiddle Logo Demo

狀態更新：jsFiddle Logo Demo Just Border Version

以上的jsfiddle有廣泛註釋在CSS部分因此您可以瞭解如何設置您的特定徽標。

HTML：

<div id="logoHolder"> 
    <div id="logoContent"> 
     <div id="logoImage"></div> 
    </div> 
</div> 

CSS：

#logoHolder { 
    width: 296px; 
    height: 296px; 
    background-color: white; 
    border: 3px solid red; 
} 

#logoContent { 
    width: 256px; 
    height: 256px; 
    padding: 20px; 
    position: relative; 
    border: 1px solid black; 
} 

#logoImage { 
    background-image:url(http://img841.imageshack.us/img841/4718/securitysealred256x256.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-color: aqua; 
    height: 100%; 
}