CSS中的固定定位和占位都是用來控制元素位置和布局的技術。
固定定位是指將元素固定在瀏覽器窗口或容器中的位置,使得元素的位置不隨滾動條的滾動而改變。這個功能常用于實現導航欄、廣告懸浮等效果。
position: fixed; top: 0; left: 0;
上述代碼將元素定位到離瀏覽器窗口頂部和左側0像素的位置。也可以指定元素的右側和底部位置,具體方法是使用right和bottom屬性。
position: fixed; bottom: 0; right: 0;
占位則是指在頁面布局中,為元素留出空間,使得其他元素不被覆蓋。實現占位有兩種方法:使用空div元素占位或使用margin/padding值設置占位。
/*使用空div元素占位*/ .placeholder { height: 100px; } /*使用margin/padding值設置占位*/ .container { padding-bottom: 100px; } .placeholder { height: 100px; }
上述代碼實現了一個高100像素的占位元素。空div元素占位的缺點是增加了頁面冗余代碼;使用padding/margin設置占位的缺點是容易造成樣式紊亂。
CSS中的固定定位和占位都是常用的頁面布局技術,靈活使用可實現豐富的網頁效果。