弹窗显示时阻止按钮下移的前端布局问题求助

要实现按钮固定在输入框正下方、弹窗在侧边且不影响按钮位置，核心是通过定位上下文隔离弹窗布局，同时让按钮的布局独立于弹窗。以下是具体实现方案：

调整后的代码 #

HTML #

<div class="container d-flex">
  <!-- 用包裹层把输入框和按钮绑定，保证按钮始终在输入框下方 -->
  <div class="input-group">
    <div class="js-input">Input</div>
    <div class="button">
      <button class="s-btn s-btn__primary">Button</button>
    </div>
  </div>
  <div class="js-popup">Popup</div>
</div>

CSS #

.container {
  position: relative; /* 作为弹窗的定位参考容器 */
  gap: 6px; /* 保持原布局的间距 */
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 输入框与按钮的垂直间距，可按需调整 */
}

.js-input {
  background: green;
  width: 300px;
  height: 40px;
}

.js-popup {
  background: blue;
  width: 80px;
  height: 120px;
  position: absolute;
  left: 310px; /* 输入框宽度 + 间距，精准定位到输入框右侧 */
  top: 0; /* 与输入框顶部对齐 */
}

.button {
  /* 无需设置absolute，通过input-group的纵向flex自然布局 */
}

核心思路解析 #

1. 定位上下文：给.container设置position: relative，让弹窗的absolute定位以容器为基准，避免弹窗脱离到页面外层。
2. 独立布局单元：用.input-group把输入框和按钮打包成纵向flex布局，确保按钮永远在输入框正下方，完全不受弹窗布局影响。
3. 弹窗脱离文档流：弹窗用absolute定位后，不会占据文档流空间，自然不会挤压按钮导致下移，再通过left和top精准控制其在输入框侧边的位置。

如果需要调整弹窗和输入框的横向距离，直接修改left的数值即可；要是想让弹窗和按钮对齐，调整top的值就行。

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