1つの要素を別の要素の上に置く

Question

ターゲット要素がどこでどこに移動するかにかかわらず、別の要素の上に配置する必要があるHTML/DOM要素があります。

さまざまな（そして残念な）理由から、単純なCSSの相対的な配置ではこれを行うことができません。再配置したい要素は、対象要素の親の直下の子にすることはできません。

jQueryのoffset（）関数を使用して、要素をターゲット要素に簡単に配置できます。ただし、ターゲット要素が移動すると、再配置された要素は追跡されません。ブラウザの寸法を変更することは、これが起こりうる1つの方法（そして私が心配する主な方法です）です。レイアウトが変更され、ターゲット要素のオフセットが変更されます。ここで

は私の文書の大まかな構造です：

<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が視覚的にDOMツリーを変更することなく、#targetの上に置くことにしたいです。私は、#targetを自然界の外に#target-containerの位置に置くことは絶対にできません。

CSS、JavaScript、および/またはjQueryを使用するソリューションにはオープンしています。

Answer 1

元のウィンドウサイズ変更イベントハンドラと同じ方法で要素の位置を変更する必要がありますが、フォントサイズの変更やスクロールなどの他のケースは処理できません。私はレイアウト変更イベントがないと思いますので、要素の移動のすべてのケースをキャッチしたい場合は、不幸にもタイマーイベントで常に再配置する必要があります。

Answer 2

それはきれいではありませんが、それはトリックを行うだろう：

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

より良い方法は、（それはまた、シナリオをサイズ変更なしで動作しますので）供給のマークアップIで

をCSSを使用することです#common-ancestor { position: relative; }を設定して、＃to-reposition-container &＃target-containerをお互いの上に置くことをお勧めします。それは問題ではありません。