Javascript 相对于静态元件的Div绝对位置

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

例如：

单击Header 2链接将在表格的左上角显示输入框。我希望它大致显示在数据1.2所在的位置。我如何做到这一点

---

（example.html中的代码在一个页面上，在live dev中CSS和JS在单独的文件中）

将要定位其他元素的元素设置为位置：相对

---

这将使其成为

position:absolute

的任何子体的包含块（除非两者之间的元素也是

position:not static

）

将要定位其他元素的元素设置为

位置：相对

这将使其成为
position:absolute
的任何子体的包含块（除非两者之间的元素也是
position:not static
）
 问题在于，对于
标题2
而言，
样式。左侧
和
样式。底部
均为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;

这正是发生的事情。您必须找出
标题2
的实际位置，例如使用jQuery。
问题是
标题2
都是
样式。左
和
样式。下
都是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;

这正是发生的事情。您必须找出
标题的实际位置，例如使用jQuery。
这在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一起工作

我使用变量过滤器和head来减少输入：）
这在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一起工作

我使用变量过滤器和head来减少键入：）
这不起作用，因为#search_过滤器不是#header_2的后代。这不起作用，因为#search_过滤器不是#header_2的后代。注意：您使用的是XHTML1.1 doctype。该版本适用于XML应用程序，但您可以将页面作为HTML提供。您应该将其更改为HTML4.01 doctype，或者HTML5。注意：您使用的是XHTML1.1 doctype。该版本适用于XML应用程序，但您可以将页面作为HTML提供。您应该将其更改为HTML4.01 doctype，或者HTML5。