CSS固定頂部導航是一種常見的網站設計技巧，它可以使網站菜單欄始終保持在頁面頂部位置固定，不隨頁面滾動而移動，讓用戶在瀏覽網頁時能夠方便地瀏覽導航欄內容。在這篇文章中，我們將介紹如何使用CSS實現固定頂部導航。

.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.container {
padding-top: 50px;
}

以上代碼實現了一個基本的固定頂部導航效果。.nav類設置了position屬性為fixed，使其脫離文檔流布局，并將其固定在頁面頂部。同時，通過設置top:0和left:0屬性，將其位置設置為距離頁面左上角的0像素位置。width屬性為100%，將導航欄寬度設置為滿屏幕寬度。height屬性設置為50像素，設置導航欄高度。background-color設置導航欄的背景色，box-shadow屬性為導航欄添加了一些陰影效果，讓其看起來更加真實。z-index屬性設置了導航欄的層級，從而將其置于其他內容的上層。

除了.nav類，還需要添加一個.container類，通過設置padding-top屬性，為下方的內容預留導航欄高度的位置。這樣不僅可以避免內容被導航欄覆蓋，同時又能保證頁面布局的美觀。

通過本文的介紹，您現在已經掌握了如何使用CSS創建一個固定頂部導航效果。如果您想要在自己的網站中應用這一技巧，可以按照本文提供的代碼進行實現。當然，如果您有更好的實現方案，也歡迎在評論區中分享您的經驗和思路。