Keep one element on top of another

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 i开发者_StackOverflow社区n 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.

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.

It's not pretty but it'll do the trick:

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

The better way is to use css (since that would also work in none-resize scenarios)

With the supplied markup i'd suggest setting #common-ancestor { position: relative; } and then absolutely position #to-reposition-container & #target-container on top of eachother, from there it should not be a problem for you.