Question

我有一个div元素，我正在使用它作为一个弹出搜索字段，我希望它出现在被过滤的元素下面。但是，似乎我不能使用我希望该字段相对的元素的style.bottom和style.left，因为此元素是静态的。

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

单击标题2链接将在表格的左上角显示输入框。我希望它大致出现在数据1.2的位置。我如何实现这一目标？

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

Answer 1

设置您希望将另一个元素相对于position: relative放置的元素。

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

Answer 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 ..

我使用变量过滤器和head来减少输入：）

Answer 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。

Div相对于静态元素的绝对位置

3 个答案: