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

Question

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

<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>

Answer 1

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

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

Parent element not showing background-color after changing child element's position to absolute

html

css

css-position