Question

我有一个HTML / DOM元素，无论目标元素在何处以及何时移动，我都需要将其放置在另一个元素上方。

由于各种（和不幸的）原因，我不能通过简单的CSS相对定位来做到这一点。我想要重新定位的元素不能是目标元素父元素的直接子元素。（事实上它需要几层，尽管这两个元素确实共享一个共同的祖先。）

我可以使用jQuery的offset（）函数轻松地将元素放在目标元素上。但是，如果目标元素移动，则重新定位的元素不会跟随。改变浏览器尺寸是一种方式（也是我关心的主要方式），这可能发生;布局更改会导致目标元素的偏移发生变化。

这是我的文档的粗略结构：

<div id="common-ancestor">
  <div id="to-reposition-container">
    <div id="to-reposition"></div>
  </div>
  <div id="some-stuff-in-between"></div>
  <div id="target-container">
    <div id="target"></div>
  <div>
</div>

我希望#to-reposition可视地放置在#target的顶部而不更改DOM树。我不能绝对将#target置于#target-container的自然界限之外。

我对使用CSS，JavaScript和/或jQuery的解决方案持开放态度。

Answer 1

它不漂亮，但它会做到这一点：

$(window).bind('resize',function() {/* reposition using offset */});

更好的方法是使用css（因为这也适用于非调整大小的场景）

使用提供的标记，我建议设置#common-ancestor { position: relative; }，然后绝对定位＃to-reposition-container＆amp; #target-container在彼此之上，从那里对你来说不应该是一个问题。

Answer 2

重新定位元素的方式与在窗口调整大小事件处理程序中最初的方式相同，但是它肯定不会处理其他情况，例如字体大小更改和滚动。我不认为有任何类型的布局更改事件，所以如果你想要捕捉元素移动的所有情况，你可能不得不经常在计时器事件中重新定位。

将一个元素放在另一个元素之上

2 个答案: