固定頂部導(dǎo)航欄是現(xiàn)代網(wǎng)站設(shè)計(jì)中非常常見的一種設(shè)計(jì)風(fēng)格，能夠提供更加流暢的用戶體驗(yàn)。下面我們來看一下如何使用 CSS 來實(shí)現(xiàn)固定頂部導(dǎo)航欄。

/* 設(shè)置頂部導(dǎo)航欄的樣式 */
nav {
background-color: #333;
color: #fff;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
/* 設(shè)置導(dǎo)航鏈接的樣式 */
nav a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
/* 設(shè)置鼠標(biāo)懸浮時(shí)鏈接的背景色 */
nav a:hover {
background-color: #555;
}
/* 設(shè)置頁面主體的樣式以避免被遮擋 */
body {
margin-top: 50px;
}

以上代碼中，我們通過設(shè)置導(dǎo)航欄的樣式和鏈接的樣式，來實(shí)現(xiàn)了一個(gè)固定在頁面頂部的導(dǎo)航欄。其中，position: fixed能夠?qū)⒃氐奈恢霉潭ㄔ谝暱谥心硞€(gè)位置，top: 0則表示將元素固定在頁面頂部。另外，通過設(shè)置z-index屬性，可以確保導(dǎo)航欄在層級(jí)上處于最頂端，不會(huì)被其他元素遮擋。

最后，在主體內(nèi)容添加margin-top的原因是，頁面主體的內(nèi)容默認(rèn)會(huì)緊貼在頁面頂部，此時(shí)固定在頁面頂部的導(dǎo)航欄會(huì)擋住部分內(nèi)容。添加一定的外邊距，就能夠避免這種問題。