CSS3相對定位指的是在元素原本的位置基礎(chǔ)上進(jìn)行微調(diào),而不是通過絕對定位來進(jìn)行移動。這種相對定位可以讓我們更加靈活地布局網(wǎng)頁。
position: relative;
使用相對定位后,可以通過top、right、bottom和left屬性來進(jìn)行微調(diào):
position: relative; top: 10px; left: 20px;
上述代碼的意思是將元素向下移動10像素,向右移動20像素。
相對定位還可以和絕對定位進(jìn)行嵌套,使內(nèi)部元素相對于外部元素進(jìn)行微調(diào):
.outer{ position: relative; height: 200px; width: 200px; } .inner{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
上述代碼的意思是將內(nèi)部元素居中對齊,相對于外部元素進(jìn)行微調(diào)。
需要注意的是,相對定位仍然占據(jù)原本的空間,不會改變頁面的布局。
總之,使用CSS3相對定位可以讓我們更加靈活地布局網(wǎng)頁,使網(wǎng)頁呈現(xiàn)出更加美觀的效果。
下一篇css media視頻