位置：絶対に最も近い位置祖先

Question

にはない私は、次のDOM構造を有する：

<div class="header-content mx-auto" style='margin-top:-250px;'> 
    <div class='circle' id='yellow' style='background-color:#FFBE00'></div> 
    <div class='circle' id='grey' style='background-color:#9A8966'></div> 
    <div class='circle' id='pink' style='background-color:blue'></div> 
    <div class='circle' id='darkred' style='background-color:#B90808'></div> 
    <div class='circle' id='red' style='background-color:#F91000'></div> 
    <h1 class="mb-5" style='width:1000px;'> 
     <span id='I'>I</span> 
     <span id='Am'>Am</span> 
     <span id='your'>Y</span> 
     <span id='cognitive'>c</span> 
     <span id='assistant'>A</span> 
    </h1> 
    <div style='width:500px;height:200px;margin-top:100px;background-color:red' id='container'> 
     <div style='position:absolute;left:70px;height:30px;width:100px;background-color:green;'></div> 
    </div> 
</div> 

最新のdiv要素は、絶対的な位置が、それは#containerだろう最も近い祖先相対的ではありません。何故ですか？これは、＃header-contentに相対的に配置されます。

Answer 1

あなたのコンテンツは#container divにラップされているものとします。それは相対的なプロパティを持っていないので、このdivに相対的ではありません。位置を追加する：相対;これにはうまくいくはずです。

Answer 2

はあなたの#containerabsoluteすべて

position: relativeに位置付け要素は次のrelative親に相対的なレンダリングされている設定する必要があります。しかし、positionの初期値はstaticであり、絶対要素で無視されます。

Answer 3

要素は、相対配置された 親に対して配置されています。親要素の相対位置は、子要素を配置する で指定する必要があります。 親が配置されていない場合、デフォルトでは絶対配置されたすべての要素 はボディを使用して配置されます。

だから、それはposition:relativeを与えられていないし、またそれがheader-contentに対する相対位置ではないので、あなたのケースで最後のdivは#containerに対して位置決めされていませんが、それはbody

に関連して配置されています