要讓導航欄保持在頂部,可以使用CSS的position: fixed;屬性來實現。下面是一種常見的方法:
<html><head>
<style>
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 10px;
}
</style>
</head>
<body>
<div class="navbar">
<!-- 導航欄內容 -->
</div>
<!-- 頁面內容 -->
</body>
</html>
在上面的代碼中,我們給導航欄的.navbar類應用了position: fixed;樣式,并設置了top: 0; left: 0;來將導航欄固定在頁面的左上角。通過設置width: 100%;,導航欄會占滿整個視口的寬度。最后,通過添加適當的背景顏色和內邊距,使導航欄看起來更好。
請注意,在導航欄上使用position: fixed;會使其脫離文檔流,并且其他元素可能會被導航欄遮蓋或覆蓋。為了避免這種情況,可以在導航欄下方的內容容器上添加一些內邊距,以確保內容不被導航欄所遮擋。