Держите один элемент поверх другого

Question

У меня есть элемент HTML/DOM, который должен оставаться над другим элементом, независимо от того, где и когда перемещается целевой элемент.

Для различных (и неудачных) причин, я не могу сделать это с помощью простого CSS-позиционирования. Элемент, который я хочу переместить, не может быть непосредственным дочерним элементом родителя целевого элемента. (На самом деле это должно быть несколько уровней, хотя оба элемента имеют общий предок.)

Я могу легко позиционировать элемент над целевым элементом, используя функции смещения() jQuery. Однако, если элемент-мишень перемещается, перемещаемый элемент не следует. Изменение размеров браузера - это один из способов (и основной способ, которым это меня волнует), это может произойти; изменения макета, которые заставляют смещение целевого элемента изменять.

Вот грубая структура моего документа:

<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

Перемещение элемента аналогично тому, как вы делали изначально в обработчике события изменения размера окна, должно работать, но оно, конечно, не будет обрабатывать другие случаи, такие как изменение размера шрифта и прокрутка. Я не думаю, что есть какое-то событие смены макета, поэтому, если вы хотите поймать все случаи перемещения элемента, вам, к сожалению, придется постоянно менять положение в событии таймера.

Answer 2

Это не красиво, но это будет делать трюк:

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

Лучший способ заключается в использовании CSS (так что также будет работать ни в одном-размер сценариев)

С помощью прилагаемого разметке я 'd предложите установить #common-ancestor { position: relative; }, а затем абсолютно позицию # to-reposition-container & # target-container на вершине eachother, оттуда это не должно быть проблемой для вас.