CSS中的div元素默認(rèn)是塊級(jí)元素，它們通常會(huì)在網(wǎng)頁(yè)上占據(jù)一定的空間，并且按照從上到下的順序排列，有時(shí)候我們可能需要讓某個(gè)div元素自由移動(dòng)位置，不受到這種順序的限制，在CSS中如何實(shí)現(xiàn)呢？

我們需要將div元素的position屬性設(shè)置為relative、absolute或fixed，這三個(gè)值都允許元素自由移動(dòng)位置，但它們之間的區(qū)別在于是如何定位元素。

relative相對(duì)于其正常位置進(jìn)行定位，也就是說(shuō)，如果你將一個(gè)元素向右移動(dòng)了20像素，那么它將會(huì)移動(dòng)到它原本位置的右邊20像素處。

absolute相對(duì)于***近的已定位祖先元素進(jìn)行定位，如果沒(méi)有已定位的祖先元素，那么它會(huì)相對(duì)于初始包含塊進(jìn)行定位。

fixed固定位置，不隨頁(yè)面滾動(dòng)而移動(dòng)。

一旦你將div元素的position屬性設(shè)置為上述三個(gè)值中的一個(gè)，你就可以使用top、right、bottom和left屬性來(lái)移動(dòng)元素到任何你想要的位置。

如果你想要將一個(gè)div元素移動(dòng)到頁(yè)面的右下角，你可以這樣寫(xiě)：

div {
  position: absolute;
  bottom: 0;
  right: 0;
}

這樣，無(wú)論頁(yè)面滾動(dòng)到哪里，這個(gè)div元素都會(huì)固定在頁(yè)面的右下角。

通過(guò)調(diào)整div元素的position屬性以及使用top、right、bottom和left屬性，你可以讓自由移動(dòng)位置，實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)的各種需求。