在CSS中，塊里邊的塊移動(dòng)通常涉及到使用相對(duì)定位（relative positioning）或***定位（absolute positioning），相對(duì)定位允許你通過position: relative;來指定一個(gè)塊相對(duì)于其正常位置進(jìn)行移動(dòng)，而***定位則可以通過position: absolute;來指定一個(gè)塊相對(duì)于其***近的已定位祖先（即包含塊）進(jìn)行移動(dòng)。

相對(duì)定位

相對(duì)定位允許你通過top、right、bottom和left屬性來調(diào)整塊的位置，如果你想要將一個(gè)塊向右移動(dòng)20像素，你可以這樣寫：

.relative-block {
  position: relative;
  right: 20px;
}

這樣，.relative-block塊就會(huì)相對(duì)于其正常位置向右移動(dòng)20像素。

***定位

***定位允許你通過top、right、bottom和left屬性來調(diào)整塊的位置，但它不會(huì)受到正常文檔流的影響，如果你想要將一個(gè)塊***定位到另一個(gè)塊的右下角，你可以這樣寫：

.absolute-block {
  position: absolute;
  right: 0;
  bottom: 0;
}

這樣，.absolute-block塊就會(huì)***定位到其***近的已定位祖先塊的右下角。

示例

假設(shè)你有以下HTML結(jié)構(gòu)：

<div class="container">
  <div class="relative-block">我是相對(duì)定位的塊</div>
  <div class="absolute-block">我是***定位的塊</div>
</div>

你可以通過以下CSS來移動(dòng)這些塊：

.relative-block {
  position: relative;
  right: 20px;
}
.absolute-block {
  position: absolute;
  right: 0;
  bottom: 0;
}

這樣，.relative-block塊會(huì)向右移動(dòng)20像素，而.absolute-block塊會(huì)***定位到.container塊的右下角。