在 CSS 布局中，子相父絕是一種常見的布局方式。子元素使用 position: absolute 或 position: fixed 定位，相對于父元素使用 position: relative 的位置。這樣，子元素就可以通過改變 top、left、right、bottom 的值來調整自己的位置。

為了實現子相父絕，我們可以先給父元素設置 position: relative，這樣子元素就可以基于這個父元素定位。接著，我們就可以給子元素設置 position: absolute 或 position: fixed，然后設置 top、left、right、bottom 的值來調整它的位置。需要注意的一點是，子元素的父元素必須設置 position 屬性為非 static，否則子元素將以 body 為基準定位。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在上面的代碼中，父元素設置了 position: relative，子元素則設置了 position: absolute。子元素的 top 和 left 值為 50%，代表其在父元素中水平和垂直居中。同時，使用 transform 屬性來讓子元素相對自身中心進行偏移，避免了只使用 top、left 屬性時子元素還需要進行寬高調整的問題。

子相父絕布局可以實現一些很神奇的效果，比如實現一個氣泡彈框。我們可以先創建一個全屏容器，然后在其中放置一個需要彈出的元素，通過子相父絕的方式定位彈出元素在屏幕上的位置。

.popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
}
.popup__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
}

在上面的代碼中，我們創建了一個名為 popup 的全屏容器，然后在其中放置了一個名為 popup__content 的元素。容器設置了 position: fixed，并且使用了 background-color: rgba(0, 0, 0, 0.5) 創建了一個半透明的黑色背景。而彈出元素則設置了 position: absolute，使用 top 和 left 屬性與 transform 屬性實現了在屏幕中央的定位。

總體來說，子相父絕布局是一種非常實用的 CSS 布局方式，可以幫助我們實現很多有趣的效果。但是需要注意的是，在使用子相父絕的同時，一定要注意布局的合理性，避免出現一些頂端或底部被遮擋等問題。