Div相對於靜態元素的絕對位置

Question

我有一個div元素，我想將其用作彈出搜索字段，希望它出現在要過濾的元素下。 但是，似乎我不能使用我希望字段相對的元素的style.bottom和style.left，因為此元素是靜態的。

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

單擊表頭2鏈接，將在表的左上角顯示輸入框。 我希望它大致出現在Data 1.2的位置。 我該如何實現？

（example.html中的代碼在一頁上，實時開發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。