CSS有一種屬性是fixed,用于通過固定元素在屏幕頂部實現滾動時固定視圖的效果。這種滾動時元素不會跟隨頁面滾動,而是一直保持在頂部。
position: fixed; top: 0; left: 0;
上面的代碼是固定元素位置的代碼,其中position屬性用于設置元素的定位方式,fixed表示該元素的位置不會受到頁面滾動的影響。
top和left屬性分別用于設置元素距離屏幕頂部和左側的距離,若想要固定在屏幕的右側或者底部可使用right和bottom屬性。
但要注意,fixed元素脫離了正常文檔流,意味著其他的內容不會因為fixed元素的位置改變而產生位置變化,這會導致fixed元素會覆蓋在其他元素上的可能,需要通過z-index屬性來設置元素的層疊順序。
z-index:1;
上述代碼中的值和其他元素的z-index值比較,確定元素的排列順序。
在設計網頁時,fixed元素常用于導航欄、廣告懸浮等常見的UI元素,為用戶提供更好的視覺體驗。
上一篇css flex 屬性
下一篇css fixed最上層