CSS中有一種定位方式叫做靜態(tài)定位,它可以將元素放置在文檔流中的一個特定位置上。在靜態(tài)定位中,元素是默認的定位方式,不需要設置position屬性。
.box { width: 300px; height: 200px; background-color: #f2f2f2; border: 1px solid #ccc; margin: 20px; }
然而,靜態(tài)定位的元素并沒有脫離文檔流,因此無法使用top、left、bottom、right屬性來調(diào)整元素的位置。使用這些屬性也不會把元素變?yōu)榻^對定位或固定定位。
在實際應用中,靜態(tài)定位主要用來調(diào)整元素在文檔流中的位置??梢允褂胢argin屬性來上下左右調(diào)整元素的位置。
.box { width: 300px; height: 200px; background-color: #f2f2f2; border: 1px solid #ccc; margin: 20px 0 0 20px; /* 上邊距為20px,右邊距為0,下邊距為0,左邊距為20px */ }
靜態(tài)定位通常不會單獨使用,而是和其他定位方式結合使用。例如可以使用絕對定位來定位元素,然后再使用靜態(tài)定位來微調(diào)元素的位置。
.box1 { position: absolute; top: 50px; left: 50px; } .box2 { position: static; margin-left: 20px; }
在這個例子中,.box1元素使用絕對定位定位在文檔流中的一個位置,然后使用靜態(tài)定位的.box2元素在左邊加上20px的邊距,微調(diào).box1元素的位置。