CSS 自動置頂指的是當網頁內容被滾動到一定位置后，特定元素會自動固定在頁面頂部并保持可見狀態，從而提高用戶體驗。下面我們將介紹如何使用 CSS 實現自動置頂效果。

首先，我們需要用 HTML 創建需要置頂的元素。在本例中，我們將創建一個固定在頂部的導航欄：

<nav id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

接下來，我們需要使用 CSS 使導航欄固定在頁面頂部。為此，我們需要設置導航欄的 position 屬性為 fixed，并將其 top 屬性設置為 0，如下所示：

#navbar {
position: fixed;
top: 0;
width: 100%;
}

此時，導航欄將固定在頁面頂部，但它將遮擋住一部分頁面內容。為了解決這個問題，我們需要添加一個與導航欄相同高度的空 div 元素，將其放在導航欄上方，如下所示：

<div id="nav-placeholder"></div>
#nav-placeholder {
height: 50px;
}

這樣一來，我們就完成了 CSS 自動置頂的效果，用戶在瀏覽網頁時，只要向下滾動頁面，導航欄就會自動固定在頂部并保持可見狀態。