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

Question

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

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

Я могу легко расположить элемент над целевым элементом, используя функции offset () 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 (поскольку это также работает в сценариях без изменения размера)

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