CSS3中定位是非常重要的一部分,其中絕對定位和相對定位是比較常用的兩種,下面就分別介紹一下它們的用法與區別。
1. 絕對定位
position: absolute; top: ; /* 與頂部的距離 */ left: ; /* 與左側的距離 */ right: ; /* 與右側的距離 */ bottom: ; /* 與底部的距離 */
絕對定位是相對于父級元素進行定位的,即使父級元素設置了margin、padding等屬性,也不會影響絕對定位元素的位置。如果沒有父級元素,則相對于整個頁面進行定位。
此外,絕對定位元素和普通文檔流元素也有所不同,絕對定位元素不占用頁面布局空間,因此其后面的元素會依次往上移動。
2. 相對定位
position: relative; top: ; /* 相對于原來位置的距離 */ left: ; /* 相對于原來位置的距離 */ right: ; /* 相對于原來位置的距離 */ bottom: ; /* 相對于原來位置的距離 */
相對定位是相對于元素本身進行定位的,其定位位置是相對于元素原來的位置進行偏移。
相對定位元素仍會占用頁面布局空間,不會影響后續元素的位置。
總的來說,絕對定位和相對定位都可以實現元素的定位,但其所占用的空間和定位的參考系不同。在具體應用中,需要根據需求選擇合適的方式進行定位操作。