CSS中固定元素位置可以讓網(wǎng)頁更美觀,使得用戶界面更加清晰。在實際應用中,我們可以使用fixed屬性、absolute屬性和sticky屬性來實現(xiàn)元素的固定位置。
position: fixed; top: 0; left: 0;
使用fixed屬性可以使得元素固定在瀏覽器的窗口上面,無論頁面如何滾動,該元素都會保持在原處,代碼如下:
position: absolute; top: 100px; left: 50px;
使用absolute屬性可以使得元素相對于其最近的父元素固定位置,無論怎樣滾動頁面,該元素都會保持在父元素的固定位置上,代碼如下:
position: sticky; top: 50px;
使用sticky屬性可以使得元素在頁面滾動到一定位置時固定在屏幕上,當頁面滾動回到該位置時,元素會重新變?yōu)樵瓉淼奈恢茫a如下:
通過使用以上三種屬性,我們可以實現(xiàn)元素在頁面滾動時保持固定的位置,以及在一定條件下定位元素的位置。
上一篇css3左右滑動切換卡片
下一篇css3帶彈性掉落效果