CSS3固定塊是指在頁面滾動時,該固定塊可以保持在頁面的某個位置不動,可以使用CSS3中的position屬性來實現。
.fixed-block{ position: fixed; top: 20px; right: 20px; }
上述代碼將元素.fixed-block的位置固定在瀏覽器窗口的右上角,距離瀏覽器窗口的頂部和右側分別為20px。這里的position屬性值為fixed表示元素的位置將相對于瀏覽器窗口固定不動。
在實際使用中,固定塊通常用在導航菜單或者廣告欄等位置。例如,我們可以將一個導航菜單進行固定,使得用戶在瀏覽網頁時可以方便地進行頁面跳轉。
.nav { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .16); z-index: 999; }
上述代碼中,.nav元素被固定在瀏覽器窗口的頂部,使得它跟隨用戶在頁面上下滾動而不會被遮擋。同時,我們還可以添加其他樣式來美化導航菜單的外觀,例如白色背景、陰影效果等。
需要注意的是,CSS3固定塊并不支持在某個父級元素內進行固定,它的位置總是相對于瀏覽器窗口而言。如果需要在某個容器內固定某個元素,可以考慮使用position: sticky屬性,該屬性可以設置元素在滾動出某個容器時才進行固定。