css 父盒子position为relative，子盒子position 全为absolute，怎么让父盒子的高度由子元素撑开呢？

可以使用 CSS 中的清除浮动技巧来实现。具体方法是在父盒子的最后一个子元素后面添加一个空的 div 元素，并设置其样式为 clear:both。这样就能够让父盒子的高度由子元素撑开。

例如，HTML 代码如下：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="clear"></div>
</div>

CSS 代码如下：

.parent {
  position: relative;
}

.child {
  position: absolute;
}

.clear {
  clear: both;
}

注意，这种方法可能会对页面布局产生影响，因此需要谨慎使用。

相关问题

css如何让父元素的高度由子元素撑开

可以使用以下两种方法让父元素的高度由子元素撑开：

1. 使用浮动（float）属性：将子元素设置为浮动，然后在父元素中添加一个clearfix类，清除浮动。这样父元素的高度就会被子元素撑开。

<style>
    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }
    .child {
        float: left;
        width: 50%;
    }
</style>

<div class="parent clearfix">
    <div class="child"></div>
    <div class="child"></div>
</div>

2. 使用 display 属性为 flex 或 table 的父元素：将父元素的 display 属性设置为 flex 或 table，使其具有自适应高度的特性，从而让子元素撑开父元素。

<style>
    .parent {
        display: flex;
        flex-wrap: wrap;
    }
    .child {
        width: 50%;
    }
</style>

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

css父盒子设置了脱离文档流，子元素却没有怎么处理

如果父元素设置了脱离文档流（例如使用了 `position: absolute`、`position: fixed` 或 `position: sticky`），而子元素没有进行任何处理，则默认情况下子元素会继续保持在文档流中。

如果你希望子元素也脱离文档流，可以通过以下方法来处理：

1. 将子元素的 `position` 属性设置为 `absolute`、`fixed` 或 `sticky`，与父元素保持一致。这样子元素也会脱离文档流，并相对于父元素进行定位。

2. 如果你不想改变子元素的 `position` 属性，但希望子元素相对于父元素进行定位，可以使用 `transform` 属性来实现。将父元素的 `position` 属性设置为 `relative`，然后给子元素添加一个 `transform: translate(0, 0);` 的样式。这样子元素会相对于父元素进行定位，但仍保持在文档流中。

以下是示例代码：

.parent {
  position: absolute; /* 或其他脱离文档流的属性 */
}

.child {
  position: absolute; /* 或其他脱离文档流的属性 */
}

/* 或者使用 transform 实现 */
.parent {
  position: relative;
}

.child {
  transform: translate(0, 0);
}

通过上述方法，你可以让子元素也脱离文档流，并根据需要进行定位。