CSS3中的相對定位指的是元素相對于自身原來的位置進行定位,而不會影響其他元素的位置。相對定位使用position: relative;
屬性進行設置。
相對定位的定位方式有兩種,一種是使用top
,right
,bottom
,left
屬性來設置元素相對于原來位置的偏移量,另一種是使用transform: translate()
來進行偏移。以下是具體的代碼實現:
div { position: relative; top: 20px; left: 30px; /* or */ transform: translate(20px, 30px); }
相對定位經常用于元素的微調,比如一個圖片與文字配合展示在同一行,但是圖片與文字又有一段間距,這時可以使用相對定位來微調圖片的位置。
需要注意的是,相對定位對其他元素的位置不會產生影響,因此如果一個元素進行了相對定位,它原來所占據的空間依然存在,其他元素不會頂替它的位置。
總體來說,相對定位是CSS中重要的定位方式之一,可以滿足一些微調元素位置的需求。
下一篇css3tab切換滑動