在 CSS 布局中，relative 定位和 absolute 定位是兩個非常常用的定位方式，它們可以相互配合使用，以實(shí)現(xiàn)各種復(fù)雜的布局效果。

relative 定位是相對于元素在文檔流中的原始位置進(jìn)行定位的。使用 relative 定位的元素會保持其在文檔流中的占位，但可以通過設(shè)置 top、right、bottom 和 left 屬性來調(diào)整其在相對位置上的偏移。例如，設(shè)置一個元素的 top 屬性為 10px，它將在原始位置的上方偏移 10 像素。

absolute 定位則是相對于其最近的已定位祖先元素或文檔的根元素（body）進(jìn)行定位的。如果沒有已定位的祖先元素，absolute 定位的元素將相對于文檔的根元素進(jìn)行定位。使用 absolute 定位的元素會完全脫離文檔流，不占據(jù)原始的空間，并且可以通過設(shè)置 top、right、bottom 和 left 屬性來精確地定位其在頁面中的位置。

當(dāng) relative 定位和 absolute 定位配合使用時，可以實(shí)現(xiàn)一些非常有趣的布局效果。例如，我們可以將一個父元素設(shè)置為 relative 定位，然后將子元素設(shè)置為 absolute 定位。子元素將相對于父元素進(jìn)行定位，這樣可以在父元素內(nèi)部創(chuàng)建出獨(dú)立的布局區(qū)域。

以下是一個簡單的示例代碼：

```css

.parent {

position: relative;

width: 200px;

height: 200px;

background-color: lightblue;

}

.child {

position: absolute;

top: 50px;

left: 50px;

width: 100px;

height: 100px;

background-color: pink;

}

```

在上述代碼中，父元素 `.parent` 設(shè)置為 relative 定位，子元素 `.child` 設(shè)置為 absolute 定位。子元素相對于父元素進(jìn)行定位，在父元素內(nèi)部的左上角偏移了 50 像素。

通過這種方式，我們可以在一個相對定位的容器內(nèi)創(chuàng)建出多個絕對定位的子元素，每個子元素可以根據(jù)自己的需求進(jìn)行定位，從而實(shí)現(xiàn)復(fù)雜的布局結(jié)構(gòu)。

還可以利用 relative 定位和 absolute 定位的組合來創(chuàng)建一些動態(tài)效果。例如，當(dāng)鼠標(biāo)懸停在某個元素上時，通過改變其 absolute 定位的屬性值，可以實(shí)現(xiàn)元素的動態(tài)移動或顯示隱藏等效果。

需要注意的是，在使用 relative 定位和 absolute 定位時，要注意元素的層級關(guān)系。如果多個絕對定位的元素重疊在一起，它們的層級順序?qū)Q定顯示的順序，層級高的元素會覆蓋層級低的元素。

relative 定位和 absolute 定位是 CSS 布局中非常強(qiáng)大的工具，它們可以相互配合使用，幫助我們實(shí)現(xiàn)各種復(fù)雜的布局效果。通過合理地運(yùn)用這兩種定位方式，可以讓網(wǎng)頁的布局更加靈活和美觀。