Question

I have an HTML/DOM element that I need to stay positioned above another element, regardless of where and when the target element moves.

For various (and unfortunate) reasons, I can’t do this through simple CSS relative positioning. The element that I want to reposition can’t be an immediate child of the parent of the target element. (It needs to be several layers up in fact, though both elements do share a common ancestor.)

I can position the element over the target element easily using jQuery’s offset() functions. However, if the target element moves, the repositioned element doesn’t follow. Changing the browser dimensions is one way (and the primary way I care about) this can happen; the layout changes which causes the target element’s offset to change.

Here’s the rough structure of my document:

<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>

I want #to-reposition to be visually placed over top of #target without changing the DOM tree. I cannot absolutely position #target outside of the natural bounds of #target-container.

I’m open to solutions that use CSS, JavaScript, and/or jQuery.

Answer 1

Repositioning the element the same way you did originally within a window resize event handler should work, but it certainly won’t handle other cases, such as font size changes and scrolling. I don’t think there’s any sort of layout changing event, so if you want to catch all cases of the element’s moving, you’d unfortunately have to constantly reposition in a timer event.