<div 自由移動是利用CSS中的position屬性對元素進行移動的一種方法。通過設置元素的position屬性為"absolute"或"relative"，可以使元素脫離文檔流，然后利用top、bottom、left、right等屬性進行定位，從而實現自由移動的效果。下面將通過幾個代碼案例來詳細解釋說明。

第一個案例是一個簡單的div自由移動效果，鼠標懸停在div上時，div會在頁面上隨機移動。

.box {
position: relative;
width: 100px;
height: 100px;
background-color: red;
transition: .5s;
}
<br>
    .box:hover {
top: calc(100vh - 100px);
left: calc(100vw - 100px);
}

在代碼中，給div設置了position屬性為"relative"，這樣div會在文檔流中保留自己的位置。然后設置div的寬度和高度，以及背景顏色為紅色。接著通過設置.transition屬性來實現移動的過渡效果。當鼠標懸停在div上時，利用:hover偽類選擇器，我們設置了div的top和left屬性值為窗口高度減去div的高度和窗口寬度減去div的寬度，這樣div就會在頁面上隨機移動。

第二個案例是一個div在頁面上可以被拖動的效果。

.drag {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
cursor: move;
}
<br>
    .container {
position: relative;
width: 500px;
height: 500px;
background-color: lightgray;
}
<br>
    document.addEventListener("DOMContentLoaded", function () {
const dragElement = document.querySelector(".drag");
let offsetX, offsetY;
<br>
      dragElement.addEventListener("mousedown", function (e) {
offsetX = e.clientX - dragElement.getBoundingClientRect().left;
offsetY = e.clientY - dragElement.getBoundingClientRect().top;
document.addEventListener("mousemove", drag);
document.addEventListener("mouseup", function () {
document.removeEventListener("mousemove", drag);
});
});
<br>
      function drag(e) {
dragElement.style.left = e.clientX - offsetX + "px";
dragElement.style.top = e.clientY - offsetY + "px";
}
});

在代碼中，創建了一個class為drag的元素，設置其position屬性為"absolute"，表示可以在頁面上任意位置進行移動。同時設置了寬度和高度，以及鼠標的光標樣式為移動形狀。接著創建了一個class為container的容器，用來包含drag元素，設置其position屬性為"relative"，這樣drag元素在該容器內進行移動時，會相對于容器進行定位。在代碼最后使用JavaScript監聽了鼠標的mousedown、mousemove和mouseup事件，實現了拖拽的效果。當鼠標按下時，記錄了鼠標位置與drag元素相對于窗口左上角的偏移值。然后，隨著鼠標的移動，通過設置drag元素的left和top屬性，使其相對于窗口進行移動。

通過上述兩個案例可以看到，使用div自由移動可以實現頁面元素的靈活定位和交互效果，可以根據具體需求選擇不同的方式來實現。除了上述案例，還有很多其他種類的自由移動效果，如元素隨著鼠標滾動而移動、響應觸摸事件進行移動等等。