CSS定位问题：如何使Div始终显示在输入框下方（适配浏览器缩放）

看起来你用position:sticky没达到预期效果，问题出在你给div设置了固定的left和top值——这类固定坐标会让div在窗口调整大小时和输入框的位置脱节，而且sticky的生效逻辑也和你当前的需求不匹配。下面给你几个可靠的解决方案：

方案1：Flexbox垂直排列（最推荐，简单稳定） #

把输入框、按钮和div包裹在一个父容器里，用Flexbox的垂直布局让它们自动排列，不管窗口怎么调整，div都会稳稳地待在输入框/按钮的正下方：

<!-- 新增父容器来控制布局 -->
<div class="input-group">
  <!-- 用子容器把输入框和按钮放在同一行 -->
  <div class="input-row">
    <input type="text" value="">
    <input type="button" id="btndotdot" class="btndotdot" value="...">
  </div>
  <div class="popupmenu_set pop_prjctcode" id="popupmenu343" style="width: 173px; cursor: pointer; margin: 0; overflow: auto; padding: 0; display: block;">
    <!-- div的内容 -->
  </div>
</div>

搭配CSS：

.input-group {
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
  width: fit-content; /* 父容器宽度适配内容，避免过度拉伸 */
}

.input-row {
  display: flex;
  gap: 8px; /* 输入框和按钮之间的间距，可按需调整 */
}

这种方式完全不需要固定坐标，布局会自动响应窗口大小变化，div始终和输入框保持垂直对齐。

方案2：利用块级元素自然换行（零额外布局代码） #

div本身是块级元素，默认会自动换行到上方行内元素的下方。你只需要移除div的固定定位属性，就能让它自然流到输入框下方：

/* 重置div的定位属性 */
.popupmenu_set {
  position: static; /* 恢复默认定位 */
  /* 删掉原来的 left:428px; top:144px; */
  width: 173px;
  cursor: pointer;
  margin: 0;
  overflow: auto;
  padding: 0;
  display: block;
}

/* 可选：确保输入框和按钮在同一行 */
input[type="text"], .btndotdot {
  display: inline-block;
}

这种方案适合不需要复杂布局的场景，只需要去掉干扰自然流的固定坐标即可。

方案3：相对+绝对定位（精准控制紧贴位置） #

如果你需要div紧贴输入框底部（比如下拉菜单效果），可以用父容器相对定位+div绝对定位的组合，让div完全跟随输入框的位置：

<div class="input-container">
  <input type="text" value="">
  <input type="button" id="btndotdot" class="btndotdot" value="...">
  <div class="popupmenu_set pop_prjctcode" id="popupmenu343" style="width: 173px; cursor: pointer; margin: 0; overflow: auto; padding: 0; display: block;">
    <!-- div的内容 -->
  </div>
</div>

搭配CSS：

.input-container {
  position: relative; /* 作为绝对定位的参考容器 */
  display: inline-block; /* 让容器宽度适配输入框+按钮的宽度 */
}

.popupmenu_set {
  position: absolute;
  left: 0; /* 对齐参考容器的左侧 */
  top: 100%; /* 刚好在参考容器的底部下方 */
  margin-top: 4px; /* 可选：和输入框之间留一点间距 */
  /* 移除原来的固定left/top值 */
}

这种方式下，div会完全跟随输入框的位置移动，窗口resize时不会出现错位。

为什么你的position:sticky没生效？ #

sticky的核心作用是滚动到特定位置时固定元素，它需要满足几个条件：

1. 父容器不能有overflow:hidden/auto/scroll（除非你要在父容器内部滚动固定）
2. 必须设置top/bottom/left/right中的至少一个值触发固定行为
3. 它不会脱离文档流，但你设置的固定left和top值反而让它变成了类似绝对定位的效果，完全偏离了sticky的设计初衷。

所以对于你的需求来说，前面几种方案比sticky更合适。

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