Javascript 输入类型文本-如何根据其在网页中的位置在下方或上方添加div

我的页面中有一个文本字段：

<input type='text' />

我有一些逻辑，如果键入某个内容，下面将显示一个div。 div就像一个组合中的弹出窗口，给你一个想法

问题是，如果textfield位于页面底部，我宁愿div出现在textfield的顶部

有没有一个简单的方法来实现这一点

另一种说法是：

---

如何知道在另一个HTML元素的底部添加div是否不适合当前页面

您可以检查元素下方的可用空间，并根据需要确定位置

var popupTop = <offset-top-of-element> + element.offsetHeight;

if(window.offsetHeight - popupTop > 100) { // change 100 as needed
   // display below
}
else {
   // display above
}

要查找元素的偏移顶部，需要递归地添加parent.offsetTop，直到没有父元素为止，如下面的回答所示：

---

注意：我还没有测试window.offsetHeight的跨浏览器兼容性。您可能需要为同一个浏览器编写多个浏览器代码。除此之外，这将适用于几乎所有的浏览器。

您可以查看这里。根据你的描述，我想你需要一个工具提示。此库将自动定位您的div

你必须做一些计算；获取div弹出窗口的绝对位置、div弹出窗口的高度，并查看其是否大于主体高度。如果是这样的话，把它移到输入的上方。这是我不想要的一个很好的例子。我刚刚试过如果文本字段在页面底部，工具提示就不会出现。这真的很糟糕，我上周在一个项目中使用了它，它对我很有效。有一些属性可以用来操纵位置。-您可以检查此问题。此解决方案是否可以跨浏览器使用？这似乎是一个好主意。您可能需要为window.offsetHeight编写多浏览器代码。除此之外，这应该适用于几乎所有的浏览器。你能编辑关于窗口的答案吗。。。一旦完成，我想这将是答案。我已经编辑了答案。顺便说一句，如果您使用jQuery，有一种跨浏览器的方法可以做到这一点。