将子元素的位置更改为绝对位置后，父元素不显示背景颜色答案

【问题标题】：Parent element not showing background-color after changing child element's position to absolute将子元素的位置更改为绝对位置后，父元素不显示背景颜色
【发布时间】：2021-07-24 13:26:22
【问题描述】：

在将父元素“部分”的位置更改为相对位置并将子元素的位置更改为绝对位置后，我正在尝试在父元素“部分”上应用背景颜色（这应该相对于父元素定位，并且还应该在后面显示背景颜色父元素），但就像子元素“#searchbar”被移动到下一个索引（将它完全从它的父元素“部分”中删除。

<html>

<head>
  <style>
    section {
      position: relative;
      border: 1px solid black;
      background-color: red;
    }
    
    #searchbar {
      position: absolute;
      top: 0px;
      right: 0px;
    }
  </style>
</head>

<body>
  <h1>Welcome!</h1>
  <section>
    <form id="searchbar">
      <label for="search">Search:</label>
      <input type="search" id="search" name="search">
      <input type="submit" name="submit" value="Go!">
    </form>
  </section>
</body>

</html>

【问题讨论】：

当你把 #searchbar position: absolute 设为空时，section 变为空，这意味着它的 width 和 height 为 0，所以你看不到背景颜色。
谢谢！这消除了我的疑虑。
绝对定位的孩子在计算父母身高时会被忽略。父级确实有红色背景，但它的高度为 0，这就是你看不到颜色的原因。你可以给父级添加一个固定的高度，也可以使用 JS 将子级的高度分配给父级。

标签： html css css-position

【解决方案1】：

背景消失的原因是父容器突然塌陷。在子元素从具有绝对属性的文档流中取出后，没有高度属性应用于父元素，因此没有高度来显示您的背景。应用高度属性，这应该可以解决问题。

【讨论】：