導航欄保持在頂部

Question

我創建了一個不錯的導航欄，即使用戶正在滾動，我也希望停留在頁面頂部。 and included it on the main page. 我為標題創建了一個單獨的PHP文件，並將其包含在主頁中。

標頭菜單的CSS

.headerMenu {
background-image: url(../img/background_white.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}

雖然效果很好，但是當用戶滾動時它不會停留在頂部，因此我決定添加一些其他代碼：

.headerMenu {
background-image: url(../img/background_white.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;

position: fixed;
top: 0;
}

輸入這兩個代碼后，導航欄將不會顯示在頁面上。
我試圖在網上問一些人，他們都提出了這個position:fixed; top:0; position:fixed; top:0; 碼。 為什么不起作用？

HTML

<div class = "headerMenu">
    <div id = "menu">
     <a href = "home.php" />What's New</a>
     <a href = "home.php" /><?php echo $firstname; ?></a>                           
     <a href = "signout_com.php" />Sign Out</a>                                             
    </div>
</div>

Answer 1

嘗試這個 ：）

.headerMenu {
    position:fixed;
    top:0;
    width:100%;
    background-color:#FF0000;
    background-image:url(../img/background_white.png);
    height:56px;
}

刪除填充物，然后刪除錨點的自閉合標簽：)

另外，請確保將內容放在其下方:)，然后在內容元素的頂部添加56px的邊距。

我希望這有幫助

Answer 2

CSS沒錯，但html沒錯：

演示： http : //jsfiddle.net/lotusgodkk/xpgzP/99/

HTML：

<div class="headerMenu">
        <div id="menu"> <a href="home.php">What's New</a>
     <a href="home.php">Name</a>  <a href="signout_com.php">Sign Out</a> <!--Incorrect closing tags removed-->
        </div>
    </div>
    <div id="content">content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>
    </div>
    <div id="footer"></div>