absolute导致高度塌陷

使用position: absolute属性会使元素脱离文档流，并不再占据原来的空间，从而导致父元素高度塌陷的问题。

解决这个问题的方法有多种。以下是一些常见的解决方法：

1.父元素设置高度

可以通过为父元素设置固定高度或使用min-height属性来解决高度塌陷的问题。这种方法适用于知道父元素高度的情况。

2.使用flexbox布局

使用flexbox布局可以很方便地解决高度塌陷的问题。将父元素设置为display: flex，并为子元素设置align-self: flex-start属性，可以让子元素相对于父元素的顶部对齐。

.parent {
  display: flex;
}
.child {
  position: absolute;
  align-self: flex-start;
}

3.使用相对定位

如果不需要子元素完全脱离文档流，可以使用position: relative属性将父元素设为相对定位，再将子元素使用position: absolute属性相对于父元素定位。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
}

需要注意的是，使用相对定位和绝对定位时，子元素的定位是相对于最近的已定位祖先元素，如果没有已定位祖先元素，则相对于文档根元素。

4.可以通过JS来获取子元素的高度，并将其赋值给父元素的高度，从而避免绝对定位元素导致的高度塌陷问题。具体代码如下：

const parentElement = document.querySelector('.parent');
const childElement = document.querySelector('.child');
const childHeight = childElement.offsetHeight;

parentElement.style.height = `${childHeight}px`;

首先，通过querySelector方法获取到父元素和子元素的DOM节点，然后使用offsetHeight属性获取子元素的高度，将其赋值给父元素的高度。这样就可以确保父元素的高度与子元素相等，从而避免高度塌陷问题。

以上是一些常见的解决高度塌陷问题的方法，具体的解决方法需要根据实际情况选择。