子元素设置position:absolute后父元素section不显示background-color问题

该现象本质是CSS绝对定位导致的父元素高度塌陷问题：

• 绝对定位（position: absolute）的元素会完全脱离正常文档流，父元素在计算自身高度时，不会将脱离文档流的子元素尺寸纳入计算
• 示例代码中section只有#searchbar一个子元素，且该子元素为绝对定位，因此section的高度默认会坍缩为0，只有上下两条1px的边框会显示，红色背景没有渲染空间自然不可见。

以下是3种常用的修复方案，可按需选择：

方案1：给父元素设置固定高度 #

适合提前知晓搜索栏高度的场景，直接给section设置匹配的高度即可：

section {
  position: relative;
  border: 1px solid black;
  background-color: red;
  /* 新增：设置和子元素高度匹配的数值即可 */
  height: 40px;
}

方案2：给父元素设置内边距预留空间 #

如果不想定死父元素高度，也可以通过内边距把绝对定位元素的占用空间提前留出来：

section {
  position: relative;
  border: 1px solid black;
  background-color: red;
  /* 新增：右内边距预留搜索栏宽度，上下内边距预留高度，数值可按需调整 */
  padding: 10px 300px 10px 10px;
}

方案3：替换为常规流布局实现需求 #

如果需求只是将搜索栏放在父元素右侧，不需要使用绝对定位也能实现，还能从根源避免高度塌陷问题：

section {
  position: relative;
  border: 1px solid black;
  background-color: red;
  /* 新增：用flex布局实现子元素右对齐 */
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

#searchbar {
  /* 删掉原有的position: absolute、top、right属性即可 */
}

内容的提问来源于stack exchange，提问作者Uzair Ahmed Nasir