div相对于静态元素的绝对位置答案

【问题标题】：Div absolute position relative to static elementsdiv相对于静态元素的绝对位置
【发布时间】：2010-01-28 13:51:38
【问题描述】：

我有一个 div 元素，我将它用作弹出式搜索字段，我希望它出现在被过滤的元素下。但是，由于该元素是静态的，因此我似乎无法使用我希望该字段与之相关的元素的 style.bottom 和 style.left。

示例在这里：http://www.is-epic.co.uk/example/example.html

单击 Header 2 链接将在表格的左上角出现输入框。我希望它大致出现在 Data 1.2 的位置。我如何做到这一点？

（example.html 中的代码在一页上，在实时开发中 CSS 和 JS 在单独的文件中）

【问题讨论】：

注意：您使用的是 XHTML1.1 文档类型。该版本适用于 XML 应用程序，但您将页面作为 HTML 提供。您应该将其更改为 HTML4.01 文档类型，或者 HTML5。

标签： javascript html css

【解决方案1】：

设置您希望相对于position: relative 定位其他元素的元素。

这将使它成为position: absolute 的任何后代的包含块（除非两者之间的元素也是position: not static）。

【讨论】：

这不起作用，因为#search_filter 不是 #header_2 的后代。

【解决方案2】：

这适用于 FF 和 Google-Chrome

var head = document.getElementById("header_2");
var filter = document.getElementById("search_filter");

filter.style.display = "";
filter.style.left = head.offsetLeft + 'px';
filter.style.top = head.offsetTop + head.offsetHeight + 'px';

它也应该适用于 IE..

我使用变量过滤器和头部来减少打字:)

【讨论】：

【解决方案3】：

问题是对于header_2，style.left 和 style.bottom 都是 0，所以

document.getElementById("search_filter").style.left =
     document.getElementById("header_2").style.left;
document.getElementById("search_filter").style.top =
     document.getElementById("header_2").style.bottom;

等价于

document.getElementById("search_filter").style.left = 0;
document.getElementById("search_filter").style.top = 0;

这正是发生的事情。您必须找出header_2 的实际位置，例如使用 jQuery。

【讨论】：