頂部懸浮導(dǎo)航是現(xiàn)代網(wǎng)頁設(shè)計(jì)的常見元素之一，在網(wǎng)站頁面的頂部固定導(dǎo)航欄能夠?yàn)橛脩籼峁└玫膶?dǎo)航體驗(yàn)，同時(shí)又不占據(jù)主體內(nèi)容的空間。下面是一個(gè)基本的樣例：

nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
nav ul li {
margin: 0 20px;
}
nav ul li a {
text-decoration: none;
color: #666;
font-size: 14px;
text-transform: uppercase;
transition: color .2s;
}
nav ul li a:hover {
color: #000;
}

這個(gè)樣例的關(guān)鍵是將導(dǎo)航欄的position屬性設(shè)置為fixed，使其“懸浮”在頁面頂部，同時(shí)使用flex布局將菜單項(xiàng)間距居中對齊。注意，在頂部固定導(dǎo)航欄的情況下，必須考慮頁面滾動時(shí)內(nèi)容的重疊問題，因此通常需要為主頁面元素增加margin-top屬性值，以避免“懸浮”菜單與頁面內(nèi)容重合。