未知高度时如何将Portal弹窗动态定位到输入框右上方？

不用硬写固定高度的负top值，只需要修改.overlay的CSS定位属性，利用绝对定位的bottom值就能实现自适应高度的顶部对齐：

修改后的CSS代码：

.root {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerContainer {
  width: 600px;
  height: 600px;
  border: 1px solid red;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
}

.input {
  width: 100%;
  height: 48px;
  border: 1px solid gray;
  position: relative;
}

.overlay {
  position: absolute;
  width: 320px;
  /* 可根据需求改为自适应高度，由内容撑开 */
  /* height: auto; */
  height: 700px;
  background-color: tomato;
  right: 0;
  /* 核心修改：用bottom:100%替代固定top值 */
  bottom: 100%;
}

原理说明 #

因为.input设置了position: relative，.overlay的绝对定位会以它为参考容器：

• bottom: 100% 表示弹窗的底部边缘与输入框的顶部边缘完全对齐，无论弹窗自身高度是多少，都会自动向上展开
• right: 0 保持弹窗右边缘与输入框右边缘对齐，实现右上角定位效果

这种方式完全不需要JS计算高度或坐标，纯CSS就能实现自适应高度的弹窗定位，避免了幽灵组件或DOM测量带来的体验问题。

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