Div absolute position relative to static elements

Question

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)

Answer 1

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

Answer 2

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.

Answer 3

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 :)