Div absolute position relative to static elements

I have a div element which I'm using as a pop-over search field which I want to have appear under the element which is being filtered. However, it seems that I cannot use the style.bottom and style.left of the element I want the field to be relative to as this element is static.

Example is here: http://www.is-epic.co.uk/example/example.html

Clicking the Header 2 link will have the input box appear, in the top-left corner of the table. I would like it to appear roughly where Data 1.2 is. 开发者_开发问答How do I achieve this?

(Code in example.html is on one page, in live dev CSS and JS are in separate files)

Set the element you wish to position the other element with respect to to position: relative.

This will make it the containing block for any descendants that are position: absolute (unless an element between the two is also position: not static).

this works in FF and 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';

it should work with IE as well..

i used variables filter and head to cut down on typing :)

The problem is that for header_2 both style.left and style.bottom are 0, so that

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

is equivalent to

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

which is exactly what happens. You have to find out header_2's actual position, e.g. using jQuery.