如何让Bootstrap列内的搜索框展开时覆盖页面其他内容

要让搜索框展开时覆盖其他列内容，核心是利用绝对定位脱离文档流，突破Bootstrap列的布局约束，具体修改如下：

关键CSS修改 #

/* 给父级row添加相对定位，作为绝对定位的参考容器 */
.row {
  background: #f8f9fa;
  margin-top: 20px;
  position: relative; /* 新增 */
}

.search-area {
  transition: all .3s ease-in;
  width: 3rem;
  position: relative; /* 默认相对定位，保持原有布局 */
  z-index: 10; /* 确保搜索框展开时在其他内容上方 */
}

/* 激活/hover时切换为绝对定位，覆盖整个row宽度 */
.search-area:focus-within,
.search-area:hover {
  position: absolute; /* 脱离列的文档流 */
  left: 0; /* 对齐row左侧 */
  right: 0; /* 对齐row右侧 */
  width: auto; /* 自动适应左右间距 */
}

.page-searchform {
  position: relative;
  width: 100%; /* 确保表单填满搜索区域 */
}

.header-search {
  padding-right: 2rem;
  border: 0;
  background-color: #fff;
  width: 100%; /* 搜索框填满表单宽度 */
}

.header-search-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 演示样式 */
.col {
  padding: 10px;
  border: 1px solid #ccc;
}

修改后的HTML（无需调整结构） #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col col-10">
      Column 1 - Make search input overflow me!
    </div>
    
    <div class="col d-flex justify-content-end align-self-center">
      <div class="search-area">
        <form class="page-searchform" action="" method="get">
          <label for="headerSearch" class="visually-hidden"></label>
          <input name="" id="headerSearch" class="header-search form-control" type="search" placeholder="Search...">
          
          <button class="btn header-search-btn" type="submit" id="headerSearchBtn">Go
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

核心原理说明 #

1. 绝对定位脱离约束：搜索区域激活时设置position:absolute，脱离Bootstrap列的flex布局限制，不再受列宽度约束。
2. 相对定位参考容器：给父级.row添加position:relative，让绝对定位的搜索区域以整行为参考，通过left:0和right:0横向铺满整行，覆盖所有列。
3. 层级控制：z-index:10确保搜索框展开时显示在其他内容上方，避免被遮挡。
4. 宽度自适应：搜索框和表单设置width:100%，确保填满展开后的搜索区域。

内容的提问来源于stack exchange，提问作者Meek