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

我有一個div元素，我用它作爲彈出式搜索字段，我想要在正在被過濾的元素下面出現。但是，似乎我不能使用我想要字段相對的元素的style.bottom和style.left，因爲此元素是靜態的。Div相對於靜態元素的絕對位置

實施例是在這裏：http://www.is-epic.co.uk/example/example.html

點擊標題2鏈路將具有輸入框中出現，表中的左上角。我希望它大致出現在Data 1.2的位置。我如何實現這一目標？

（代碼在example.html的是在一個頁面上，在現場開發CSS和JS在不同的文件）

2010-01-28 Andrew

注意：您正在使用XHTML1.1文檔類型。該版本適用於XML應用程序，但您將該頁面作爲HTML提供。您應該將其更改爲HTML4.01文檔類型或HTML5。 – Rob 2010-01-28 14:24:55

這部作品在FF和谷歌鉻

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瀏覽器以及..

我使用的變量過濾器和頭減少輸入:)

來源

2010-01-28 14:03:52

謝謝，這完美的作品。 – Andrew 2010-01-28 14:12:05

設爲您希望相對於其他元素位置向position: relative的元素。

這將使它成爲position: absolute（除非兩者之間的元素也是position: not static）的任何後代的包含塊。

來源

2010-01-28 13:57:00 Quentin

這不起作用，因爲#search_filter不是＃header_2的後代。 – 2010-01-28 14:06:13

的問題是，對於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。

來源

2010-01-28 13:59:22

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

回答

相關問題