當我們使用 CSS 中的絕對定位來布局元素時，有時會遇到絕對定位塌陷的問題。這可能會導致元素的位置不正確，而我們需要知道什么是絕對定位塌陷，以及如何避免和修復這個問題。

絕對定位塌陷出現的原因是當父元素使用了相對定位，而子元素使用了絕對定位時，如果子元素的高度超過了父元素的高度，那么子元素的底部將會超出父元素的底部。這時候，我們會發現父元素的高度并沒有被子元素撐起來，而是縮小了。這種情況就是絕對定位塌陷。

.parent {
position: relative;   /* 父元素使用相對定位 */
height: 200px;
}
.child {
position: absolute;   /* 子元素使用絕對定位 */
bottom: 0;
height: 300px;        /* 子元素高度超過了父元素 */
width: 100px;
}

如上面的代碼所示，父元素的高度是 200px，子元素的高度卻是 300px，超出了父元素的高度，看到下面的代碼演示：

為了避免絕對定位塌陷的問題，我們需要做如下操作：

• 設置父元素的高度，不要讓子元素高度超過父元素
• 使用 top 或 left 屬性代替 bottom 或 right 屬性定位子元素
• 將子元素的高度設置為百分比或者使用 calc 計算高度
• 使用 transform 屬性代替絕對定位

通過以上方法，我們可以避免絕對定位塌陷問題的出現，并且能夠更好地布局頁面。