CSS 是一種前端開發(fā)語言，它可以控制網(wǎng)頁的樣式和布局。它包括很多屬性，其中一個非常有用的屬性是 position。

使用 position 屬性，我們可以控制一個元素在頁面中的位置。在這個屬性中有許多值可供使用，包括：static、relative、absolute 和 fixed。本文將著重討論相對定位（relative）和絕對定位（absolute）。

定位的懸浮框一般來說是使用絕對定位 （position: absolute）來實現(xiàn)。這是因為絕對定位允許我們將一個元素相對于其父元素的位置進行定位。

當我們使用 position: absolute 屬性時，我們需要設置一個父級元素的定位。如果沒有設置定位，那么絕對定位的元素將相對于文檔的頂部和左側(cè)進行定位。

.parent {
position: relative; /* 設置父元素為相對定位 */
width: 400px;
height: 400px;
}
.popup {
position: absolute; /* 設置懸浮框為絕對定位 */
top: 50%; /* 將懸浮框向下偏移 50% */
left: 50%; /* 將懸浮框向右偏移 50% */
transform: translate(-50%, -50%); /* 使用 transform 進行糾正 */
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
}

在代碼中，我們首先設置了父元素 .parent 為相對定位，然后將懸浮框 .popup 設為絕對定位。我們將 top 屬性設置為 50%，這將使懸浮框向下偏移父元素高度的一半。同樣的，我們將 left 屬性設置為 50%，這將使懸浮框向右偏移父元素寬度的一半。

但是，這樣設置懸浮框位置會導致它的中心點向下和向右偏移。因此，我們使用 transform 屬性進行了糾正。將 translate(-50%, -50%) 應用于 .popup，這將使懸浮框重新居中。

總體來說，使用相對定位和絕對定位可以很容易地控制懸浮框的位置，而且還可以使用其他 CSS 屬性來美化它們。