为什么父元素设置了，position:relative; 子元素设置position：absolute；后父元素的高不能被子元素内容自动撑开，如果要自动撑开，应该要怎么做

当你在一个相对定位（position: relative;）的父元素中包含一个绝对定位（position: absolute;）的子元素时，由于绝对定位会脱离文档流，它不会影响父元素的高度计算。这意味着即使子元素的内容很高，父元素的高度也不会自动随着子元素内容的变化而改变。

为了使父元素高度能自动根据子元素的内容撑开，你可以尝试以下几种方法：

1. **使用`position: relative;`和`overflow: auto;`**：这会让父元素在其内容超过视口高度时创建一个滚动条，从而使高度适应子元素。

<div style="position: relative; overflow: auto;">
   <div style="position: absolute;"></div>
</div>

2. **使用`position: sticky;`**：对于现代浏览器支持，可以将父元素设置为`position: sticky; top: 0;`，当内容超过一定位置时，父元素会变成粘性的，保持在顶部，并随内容变化高度。

<div style="position: sticky; top: 0;">
   <div style="position: absolute;"></div>
</div>

3. **给父元素设置min-height**：虽然不是“自动”，但可以通过设置最小高度值让父元素有最低限制，避免塌陷。

.parent {
   position: relative;
   min-height: 100px; /* 根据需要调整数值 */
}

请注意，以上方法可能会导致一些兼容性问题，特别是旧版本的浏览器可能不支持某些属性。在实际应用中，建议先确认目标浏览器的支持情况。