Абсолютное положение Div относительно статических элементов

Question

У меня есть элемент div, который я использую в качестве поля поиска, которое я хочу видеть под элементом, который фильтруется. Тем не менее, кажется, что я не могу использовать style.bottom и style.left элемента, в котором я хочу, чтобы поле было относительно, поскольку этот элемент является статическим.

Пример здесь: http://www.is-epic.co.uk/example/example.html

Нажав на ссылку заголовка 2 будет появляться окно ввода, в верхнем левом углу таблицы. Я хотел бы, чтобы это выглядело примерно так, как указано в Data 1.2. Как мне это достичь?

(код в example.html на одной странице, в живом Dev CSS и JS в отдельных файлах)

Answer 1

это работает в 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, а ..

я использовал переменный фильтр и голова, чтобы сократить набрав :)

Answer 2

Установите элемент, который вы хотите поместить другой элемент по отношению к к position: relative.

Это сделает его содержащим блоком для любых потомков, которые являются position: absolute (если между ними нет элемента position: not static).

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's актуальные позиция, например. используя jQuery.