CSS 2位置：固定元素奇怪的行爲

我一直在玩CSS和我堅持一個非常可怕的問題 - 位置：固定。問題是，我正在編輯wordpress模板，因爲它是已知的，有一個管理欄的位置：固定在每個模板。我試圖在管理欄下方添加另一個欄，如菜單，但它總是顯示在管理欄的下方，但大約低於其50px。菜單是固定的，但不是我想要顯示的確切位置。CSS 2位置：固定元素奇怪的行爲

我不能放置屬性頂部的菜單欄：28px，因爲管理員只對註冊用戶可見，所以對於guest虛擬機，菜單仍然會在不可見對象下浮動28px。至於登記，這將是很好，但正如我所說，不適合客人。

粘貼管理員欄和菜單的代碼也許你們有人可能發現問題...

#headerbar { 
    min-width: 100%; 
    height: 55px; 
    background-color: rgb(0, 166, 81); 
    z-index: 999999; 
    position:fixed; 
} 

#wpadminbar { 
    direction: ltr; 
    color: rgb(204, 204, 204); 
    font: 13px/28px sans-serif; 
    height: 28px; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    min-width: 600px; 
    z-index: 9999; 
    background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70); 
}

如果這是不夠的，發現這個問題，我可以張貼身體CSS（如果只需要？）。

來源

2013-06-24 Lukas Valatka

您可以爲已登錄和未登錄的用戶設置不同的排名。比如，給你的標題欄默認的頂部位置爲0，當用戶登錄並且管理員時，給它一個額外的「with-admin-bar」類，它將頂部位置設置爲28px左右。

編輯：其實，這這裏是更正確，更乾淨的解決方案：

CSS：

.bar-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 

    width: 100% 
} 

.admin-bar { 
    height: 50px; 
    background: red; 
} 

.other-bar { 
    height: 50px; 
    background: blue; 
}

HTML：

<div class="bar-wrapper"> 
    <div class="admin-bar"></div> 
    <div class="other-bar"></div> 
</div>

親身體驗：http://jsfiddle.net/CVeXA

來源

2013-06-24 10:15:43

我我一直在想這樣的事情，但是，先生，謝謝你！ –

另一種解決方案是將兩個條放入具有「固定位置」的包裝中。在包裝內部，讓兩個酒吧在彼此之下流動，像這樣：http://jsfiddle.net/CVeXA/ –

嘗試刪除我的jsfiddle中的admin-bar div，其他酒吧然後將堅持到最頂部的頁。 –

CSS 2位置：固定元素奇怪的行爲

回答

相關問題