我尝试在父元素上应用background-color "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>背景消失的原因是父容器突然崩溃了。在使用绝对属性将子元素从文档流中取出之后，没有高度属性应用于父元素，因此没有高度来显示背景。应用一个height属性，这应该可以解决这个问题。