Javascript将两个元素放在彼此的顶部

时间:2009-10-08 08:33:51

标签: javascript

我有两个div一个在另一个之上。第二个绝对位于它下面(相对div内的绝对div)。

我想将第二个div移到另一个div的顶部,所以它出现在中间。

这个过程是将DIV2的style.top设置为与DIV1相同,理论上应该将它放在它上面。然而到目前为止,尝试都失败了。

绝对定位工作正常,因为输入值会正确移动它,但我认为我使用错误的方法来获取DIV1的高度/最高值。

想法?

我试过了:

divLoading.style.top = divContent.style.top;

但它保持原样。

编辑:问题不在于绝对/相对如何工作,而是使用哪些javascript值正确。使用DIV2.style.top = DIV2.style.top - DIV1.clientHeight将其移动到顶部...但是clientHeight不正确,因为如果DIV1改变大小,它会使DIV2向上移动太远。

编辑:offsetTop似乎为零。

2 个答案:

答案 0 :(得分:1)

绝对定位的div位于相对定位的div中,默认情况下“借用”它从相对父级的顶部和左侧位置。这意味着通过设置left:0; top:0,div将共享相同的位置。

如果你想移动第二个div,你必须设置一个负顶部(即top: -200px)。顶部和左侧属性是相对于基本位置而不是主体(除非div不在相对定位的父级中,在这种情况下,主体是基本位置)

答案 1 :(得分:0)

如果div1位于相对位置,则顶部和左侧值将相对于正常流程中的di​​v移动div。所以style.top = 10会将它从正常位置向下移动10个像素。

如果位置是“绝对的”,则style.top = 10会将div从相对于它所定位的div向下移动10个像素(即,具有位置的前一个元素:相对的,或者文件)