親要素ではない別の要素に対する相対位置要素

Question

現在、親要素ではない別の要素を基準にして配置要素を作成できますか？例：この例ではそう

<div class="want-to-be-parent"> 
<div class="current-parent"> 
<div class="element-to-position"><!---content---></div> 
</div> 
</div> 

、私は左上の絶対位置「要素ツー位置」したい「したい-に被親」が、その現在の比較的現在、親の内側に配置'

EDIT - これら3つの要素のすべてが「相対位置」を持ち、それを制御できないと仮定します。私は絶対的に「要素から位置へ」の位置を決め、それが「親になりたい」と相対的に絶対的に位置付けされ、「現在の親」ではなく位置付けされることを望みます。私は他の方法がないので、これを動的に行う必要があります。

Answer 1

セット、position:relative;にに被親たいと現在の親あなたが要素にposition:absoluteを使用する場合、それは非静的位置に最初の親との相対位置になる

position:static;に設定好ましくは相対的な位置に配置される。

あなたのコードは次のようになります。

.want-to-be-parent { 
 
    position:relative; 
 
    padding:40px; 
 
    border:1px solid; 
 
    
 
} 
 

 
.current-parent{ 
 
    padding:40px; 
 
    border:1px solid; 
 
} 
 

 
.element-to-position { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    padding:10px; 
 
    background:red; 
 
}

<div class="want-to-be-parent"> 
 
want to be parent 
 
    <div class="current-parent"> 
 
    curent parent 
 
    <div class="element-to-position"> 
 
     element 
 
    </div> 
 
    </div> 
 
</div>