CSS3 頭部固定是 Web 開(kāi)發(fā)中非常常見(jiàn)的一個(gè)特性。它可以讓頁(yè)面的頭部（Header）始終固定在最頂部，隨著網(wǎng)頁(yè)的滾動(dòng)而保持不動(dòng)。這種效果可以增加網(wǎng)站的易用性，方便用戶(hù)快速訪(fǎng)問(wèn)導(dǎo)航、標(biāo)題、搜索框等重要內(nèi)容。下面介紹一種使用 CSS3 實(shí)現(xiàn)頭部固定的方法。

/* 首先，我們需要為 Header 元素設(shè)置以下 CSS 屬性 */
header {
position: fixed;  /* 設(shè)置為 fixed，讓它固定在屏幕上方 */
top: 0;
left: 0;
width: 100%;
z-index: 999;  /* 給 Header 元素一個(gè)較高的 z-index 值，確保它在其他元素之前顯示 */
}
/* 接下來(lái)，使用下面的代碼創(chuàng)建一個(gè)占位元素，讓它占據(jù) Header 元素的高度 */
body {
padding-top: 100px; /* 假設(shè) Header 的高度為 100px */
}

以上代碼的作用是將 Header 元素設(shè)置為固定定位（position: fixed），然后讓它在整個(gè)視口的左上角上方呈現(xiàn)（top: 0; left: 0;），并且寬度為整個(gè)視口的寬度（width: 100%）。為了確保 Header 始終在最前面，它的 z-index 值設(shè)置為 999。

接下來(lái)，我們需要為 body 元素添加一個(gè) padding-top 屬性，將它的值設(shè)置為 Header 的高度，以便為 Header 留出足夠的空間，使得其他頁(yè)面內(nèi)容不會(huì)被 Header 遮擋。

經(jīng)過(guò)這樣的設(shè)置，當(dāng)用戶(hù)向下滾動(dòng)時(shí)，Header 就會(huì)留在頁(yè)面頂部不動(dòng)，直到用戶(hù)滾動(dòng)到頂部，它會(huì)重新出現(xiàn)在視口上方。這種效果非常好用，尤其適用于需要迅速訪(fǎng)問(wèn)網(wǎng)頁(yè)信息的情形，比如電商網(wǎng)站、博客等。