<div>是HTML中的一個(gè)標(biāo)簽，常被用來(lái)定義文檔中的一個(gè)分節(jié)或者一個(gè)區(qū)域。HTML中的<div>標(biāo)簽沒(méi)有特定的行為，但是利用CSS和JavaScript可以對(duì)<div>進(jìn)行樣式和行為的定制。其中一個(gè)常用的CSS屬性就是可移動(dòng)屬性，它可以讓<div>元素在頁(yè)面中隨意移動(dòng)。
可移動(dòng)屬性是利用CSS的position屬性實(shí)現(xiàn)的。position有幾種取值，其中常用的是relative和absolute。relative意味著元素的位置相對(duì)于它所在的正常位置進(jìn)行定位，而absolute意味著元素的位置相對(duì)于它的第一個(gè)非靜態(tài)定位的父元素進(jìn)行定位。因此，我們可以通過(guò)設(shè)置<div>的position屬性為relative或absolute，并根據(jù)需要設(shè)置top、left、right、bottom屬性，來(lái)實(shí)現(xiàn)<div>元素的移動(dòng)。
下面是幾個(gè)代碼案例來(lái)詳細(xì)說(shuō)明可移動(dòng)屬性的使用。
案例一：

<style>
.box {
position: relative;
top: 50px;
left: 100px;
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="box"></div>

上述代碼中，我們創(chuàng)建了一個(gè)寬高為200px的紅色方塊，并設(shè)置了position屬性為relative，top為50px，left為100px。這樣一來(lái)，這個(gè)紅色方塊就會(huì)相對(duì)于它的正常位置向下移動(dòng)50px，向右移動(dòng)100px。
案例二：

<style>
.container {
position: relative;
width: 400px;
height: 400px;
background-color: lightgray;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="container">
<div class="box"></div>
</div>

這個(gè)案例中，我們創(chuàng)建了一個(gè)容器，并在容器中創(chuàng)建了一個(gè)寬高為200px的紅色方塊。容器的position屬性為relative，而紅色方塊的position屬性為absolute。然后通過(guò)設(shè)置紅色方塊的top為50%，left為50%，再結(jié)合transform屬性來(lái)實(shí)現(xiàn)將紅色方塊定位在容器的中心位置。
通過(guò)這個(gè)案例，我們可以看到，利用可移動(dòng)屬性，我們可以將元素放置在任意位置，從而實(shí)現(xiàn)比較靈活多樣的布局效果。
起來(lái)，可移動(dòng)屬性是通過(guò)設(shè)置<div>元素的position屬性為relative或absolute，并配合top、left、right、bottom屬性來(lái)實(shí)現(xiàn)元素在頁(yè)面中的移動(dòng)。這樣一來(lái)，我們可以在HTML文檔中更加自由地布局和排列元素，達(dá)到我們想要的效果。