Javascript将两个元素放在一起答案

【问题标题】：Javascript position two elements on top of each otherJavascript将两个元素放在一起
【发布时间】：2009-10-08 08:33:51
【问题描述】：

我有两个 div 一个在另一个之上。第二个 on 绝对位于其下方（相对 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 似乎为零。

【问题讨论】：

您能否提供您想要的截图，以便我们获得更清晰的图片？
不需要截图，在这种情况下，5 或 6 行 HTML 和 CSS 就足够了。
试试这个，divLoading.style.top = divContent.offsetTop;

标签： javascript

【解决方案1】：

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

如果你想上移第二个 div，你必须设置一个负数的顶部（即top: -200px）。 top 和 left 属性是相对于基本位置，而不是 body（除非 div 不在相对定位的父级中，在这种情况下，body 是基本位置）

【讨论】：

【解决方案2】：

如果 div1 是相对定位的，那么 top 和 left 值会将 div 相对于它在正常流程中的位置移动。所以 style.top = 10 会将其从正常位置向下移动 10 个像素。

如果位置是“绝对的”，style.top = 10 会将 div 移动到它相对于它定位的 div 的 10 个像素处（即，具有 position:relative 或 body 的前一个元素文件）

【讨论】：