DIV內的CSS位置困境

我正在使用我網站的頂部標題欄樣式。我在頭部DIV中放置了2個DIV。 One Div在頂部，而另一個在底部。頂部是專用於右側的鏈接的左側徽標，底部的Div則專用於水平菜單（我將在稍後完成）。DIV內的CSS位置困境

我的問題出現在Logo的位置上。我的標誌比頂部Div稍高，這導致底部Div僅覆蓋我的標誌底部。如果我裁剪或調整了標誌，問題就解決了。但我不想這樣做。我想在更高的Z指數上製作Logo。但它不起作用。似乎Z-index被忽略。

這是我到目前爲止有：

<div id="siteHeader"> 

    <div id="headernav-top" style="height:50px;"> 
    <div id="headerlogo" style="height:72px;background-image:url('logo.jpg');background-repeat:no-repeat;"> 
    </div> 
    <span id="headertext"> 
     Welcome Back, <b>Whomever you are</b> | 
     <a href="/">My Account</a> | 
     <a href="/logout.php">Log Off</a> <br /> 
    </span> 
    </div> 

    <div id="headernav-bottom" style="height:39px;background-color:#0C6;"> 

    More Nav will go here 

    </div> 
</div> <!-- end siteHeader -->

的headernav底肯定是覆蓋72px高度標誌的底部，在headerlogo格。

而當我把Z指數在兩個div內，似乎被忽略。

是否有另一種方式來獲得headerlogo到siteHeader格在上述範圍內解決？

來源

2012-11-07 coffeemonitor

只是使徽標位置絕對，你甚至不需要z-index，但是如果你想給它一個更高的z-index – Huangism

你能創建一個jsfiddle嗎？ –

似乎你已經found the answer aaaaand這就是爲什麼這樣的原因：z-index 是被靜態定位的元素（默認值）忽略。如果將z-index應用於positon:relative,positon:absolute或positon:fixed元素，z索引纔會生效。

添加非靜態位置屬性是強制所需元素堆疊的常用方法。您使用哪一個也很重要：

position: relative
這將允許您的元素在文檔中保留其流。使用這個元素將使其他元素不會摺疊到元素將佔用的區域當作靜態元素。

position: absolute
這使得元素流出。與relative相反，這將在文檔中給它一個0px×0px的有效大小。其他元素則會陷入這個元素本來會佔據的區域。（請注意，這有時會讓這些元素隱藏你的absolute元素後面。）

positon: fixed
同absolute。流出，但是用這個，元素是相對於窗口而不是第一個非靜態的父對象。（只有當您使用top，right，bottom和left進行定位時才重要）當您滾動時，它也會「粘」到窗口。

爲了您的目的，position:relative沒有定位屬性可能是最好的。

來源

2012-11-07 20:07:18

這項工作？我添加了一個位置：絕對;屬性。

<div id="headerlogo" position: absolute; style="height:72px; background-image:url('logo.jpg'); background-repeat:no-repeat;"> 
</div>

來源

2012-11-07 19:43:05

試過了，到目前爲止它完全消失了。但是，我確實改變了立場：相對;它的工作。 – coffeemonitor

#headernav-top你是50像素高，而內#headerlogo是72像素高。因此，內部元素流過外部元素的邊界。如果您還沒有確定#headernav-top的位置，那麼請忽略它的height屬性。該元素現在將根據需要展開高度（例如，考慮背景圖像容器的高度）。

來源

2012-11-07 19:46:02 feeela

DIV內的CSS位置困境

回答

相關問題