CSS3實現頭部不動非常簡單,只需要設置固定定位即可。
header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }
上面的代碼中,position: fixed;
將頭部元素設置為固定定位。然后通過top: 0;
、left: 0;
和right: 0;
設置頭部的位置為頂部,并且寬度和父元素一樣。
如果不希望頭部遮擋頁面內容,可以設置一個z-index
屬性。這個屬性控制元素的堆疊順序,數值越大則越在上層。在這個實例中,我們將頭部的z-index
設置為9999,確保它始終在頁面最頂層。
需要注意的是,當頭部固定定位時,下面的內容會自動上移,因此在實際使用時需要依據具體情況進行調整。