CSS相對(duì)定位和絕對(duì)定位是前端開(kāi)發(fā)中常用的兩種樣式屬性。相對(duì)定位和絕對(duì)定位都是通過(guò)改變?cè)卦诰W(wǎng)頁(yè)中的位置來(lái)實(shí)現(xiàn)的，但二者有著不同的作用和效果。

/*相對(duì)定位*/
position: relative;
top: 10px;
left: 20px;
/*絕對(duì)定位*/
position: absolute;
top: 50px;
left: 80px;

相對(duì)定位是指可以讓元素在當(dāng)前位置上進(jìn)行微調(diào)，通過(guò)top和left屬性來(lái)控制元素上下、左右移動(dòng)的距離。而絕對(duì)定位是將元素從其普通文檔流中移除，將其定位在離元素最近的已定位的祖先元素的某個(gè)位置上。

/*相對(duì)定位*/
div {
position: relative;
}
/*絕對(duì)定位*/
div {
position: absolute;
top: 50px;
left: 50px;
}
span {
position: relative; /*設(shè)置span變成定位元素*/
top: -10px;
left: 10px;
}

相對(duì)定位適用于對(duì)元素進(jìn)行小范圍的移動(dòng)和微調(diào)，內(nèi)容仍然在文檔流中并會(huì)占據(jù)其原本的空間。而絕對(duì)定位適用于創(chuàng)造出浮動(dòng)效果，將元素移動(dòng)到網(wǎng)頁(yè)中的任意位置，不占據(jù)文檔流中的空間。