CSS固定標頭Top：0;

Question

在一個網站上工作，我正在努力做到這一點，因此<header></header>和導航仍然位於該網站的頂部。 我可以解決一些似乎無法解決的問題。

我使用的代碼是：

header {
    background:#000;
    position:fixed;
    width: 100%;
    top: 0;
}

現在，一旦我將這段代碼放進去， <header>標記中所有帶有或不帶有的內容都將落在''之下，並且還會在下方滾動通過，就像通過它一樣。 我想知道是否有一種方法可以使網站的其余部分降為''或滾動而不會在<header>之下或通過？

我嘗試給<header> <margin-bottom>創建空間，以便在站點首次加載時顯示文本，但這似乎無法解決。

任何解決方案的鏈接？

Answer 1

只需在頁眉上放置一些高度，並在正文上放置邊距即可。

header {
    background:#000;
    position:fixed;
    width: 100%;
    top: 0;
    height: 60px;
}

body {
    margin-top: 60px
}

Answer 2

給header一個z-index:9999以便它始終位於內容top ，還給一個min-height:50px ，希望它能解決您的問題:)

謝謝

header {
background:#000;
position:fixed;
width: 100%;
min-height:50px;
padding:50px 10px 5px;
top: 0;
left:0px;
z-index:9999;
overflow:hidden;
}

Answer 3

除了標題之外，將內容換行的其他內容都應padding-top: [height of header] 。 這樣可以避免重疊。