如何实现绝对定位的modal_container随input_container动态下移并保持正下方？

以下是几种可行的实现方案，按推荐优先级排序：

方案1：利用相对定位+绝对定位的嵌套规则（最推荐） #

核心是让绝对定位元素以input_container为参考，用top: 100%替代bottom，实现自动跟随：

• 给input_container设置position: relative，让它成为子元素绝对定位的参考容器
• 给modal_container设置position: absolute + top: 100%，这样它会始终紧贴容器底部，容器高度变化时自动下移

.input_container {
  position: relative;
  /* 你的其他样式，比如padding、border等 */
}

.modal_container {
  position: absolute;
  top: 100%;
  left: 0; /* 可根据需求调整水平位置 */
  background-color: pink;
  /* 你的其他样式，比如width、padding等 */
}

原理：绝对定位元素的top: 100%是相对于父容器的高度计算的，父容器因新增元素变高时，这个值会自动更新，无需额外操作。

方案2：用Flex/Grid布局替代绝对定位（如果允许脱离绝对定位场景） #

如果不需要modal_container脱离文档流，直接用流式布局让它自然排在input_container下方：

• 给外层父容器设置display: flex; flex-direction: column
• input_container和modal_container作为同级子元素，容器高度变化时，下方元素会自动跟随

.parent_wrap {
  display: flex;
  flex-direction: column;
}

.input_container {
  /* 你的其他样式，无需设置relative */
}

.modal_container {
  background-color: pink;
  /* 你的其他样式，无需设置absolute */
}

方案3：JavaScript监听容器变化（兜底方案） #

如果必须保留绝对定位且CSS方案不适用，用MutationObserver监听容器的高度变化，动态调整定位值：

const inputContainer = document.querySelector('.input_container');
const modalContainer = document.querySelector('.modal_container');

// 创建观察者，监听容器的子元素、样式变化
const observer = new MutationObserver(() => {
  modalContainer.style.top = `${inputContainer.offsetHeight}px`;
});

// 配置监听选项
observer.observe(inputContainer, {
  childList: true,    // 监听子元素添加/删除
  subtree: true,      // 监听子树变化
  attributes: true,   // 监听属性变化
  attributeFilter: ['style'] // 只监听样式属性
});

原理：当input_container内新增元素导致高度变化时，观察者会触发回调，重新计算容器高度并设置modal_container的top值，确保它始终在容器正下方。

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