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相对于静态元素的绝对位置

回答

相关问题