css 绝对定位塌陷 |css的自适应布局

绝对定位塌陷出现的原因是当父元素使用了相对定位，而子元素使用了绝对定位时，如果子元素的高度超过了父元素的高度，那么子元素的底部将会超出父元素的底部。这时候，大家会发现父元素的高度并没有被子元素撑起来，而是缩小了。这种情况就是绝对定位塌陷。

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

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

为了避免绝对定位塌陷的问题，大家需要做如下操作：

• 设置父元素的高度，不要让子元素高度超过父元素
• 使用 top 或 left 属性代替 bottom 或 right 属性定位子元素
• 将子元素的高度设置为百分比或者使用 calc 计算高度
• 使用 transform 属性代替绝对定位

通过以上方法，大家可以避免绝对定位塌陷问题的出现，并且能够更好地布局页面。