CSS頂部固定導航是前端開發中經常用到的一種技術，通過設置元素的位置屬性，可以實現頁面滾動時導航欄固定在頁面頂部的效果。下面是一個簡單的示例代碼：

HTML結構：

<nav class="navigation">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

CSS樣式：

.navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #fff;
z-index: 999;
}
.navigation ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.navigation li {
margin: 0 20px;
}
.navigation a {
display: block;
text-decoration: none;
color: #333;
font-size: 16px;
padding: 10px;
border-radius: 5px;
transition: all 0.3s ease;
}
.navigation a:hover {
background-color: #ccc;
color: #fff;
}

代碼中，我們將導航欄元素的position屬性設置為fixed，使其相對于窗口固定位置；再設置top、left、right等屬性，讓導航欄水平居中并貼緊頁面頂部。同時，我們為導航欄添加了z-index屬性，確保其在頁面的上層顯示。 在導航欄中，我們使用了flex布局，并為a標簽設置了漸變過渡效果，使導航欄在鼠標懸停時有視覺變化。 通過這樣的CSS頂部固定導航技術，我們可以為網站頁面提供更好的用戶體驗，讓頁面在滾動時保持導航欄始終可見，方便用戶瀏覽網站內容。