絶対位置内の絶対位置決め

Question 1

私は3つのdiv要素を持っています。

1番目divは大きく（ラップ）、position:relative;

2番目divは1番目のdiv相対位置に対して絶対的に配置されます（そして1番目に含まれますdiv）

3番目divは2番目に含まれ、div絶対位置もあります。

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

相対位置を持つ1番目ではなく、3div番目の位置が2番目div（1番目の絶対位置でもある）に対して絶対的であるのはなぜですか？divdiv

3番目divは絶対位置の2番目への絶対位置だからdivです。

Question 2

なぜならposition: absolute、同じように子の相対位置をリセットするからposition: relativeです。

これを回避する方法はありません。3番目divを最初のものに対して絶対的に配置したい場合は、最初のものの子にする必要があります。

Question 3

両方ともposition:relative、position:absolute配置の継承者として含まれる要素を確立します。

div1に基づいてdiv3を配置する必要がある場合は、div1の直接の子にします。

これposition: relativeは、要素がその自然な位置に対して配置されているposition: absoluteことを意味し、要素が最初position:relativeまたはposition:absolute祖先に対して配置されていることを意味することに注意してください。

Question 4

静的な位置：静的な位置は、位置がまったく指定されていない場合に、HTMLファイルの通常のフローに要素が表示されるデフォルトの方法です。

重要：、、およびプロパティtopはright、静的に配置された要素には影響しません。bottomleft

相対位置：要素を相対値で配置すると、要素（および要素が占めるスペース）がHTMLファイルの通常のフローに保持されます。

その後、プロパティを使用して、いくつかの量で要素を移動させることができleft、right、topとbottom。ただし、これにより、要素がページ上にある他の要素とオーバーラップする可能性があります。これは、必要な効果である場合とそうでない場合があります。

比較的配置された要素はその場所から移動できますが、それが占めていたスペースは残ります。

絶対位置：要素に絶対位置値を適用すると、通常のフローから要素が削除されます。絶対位置の要素を移動すると、その参照点は、静的以外の位置が宣言されている最も近い包含要素の左上になります。これは、最も近い位置コンテキストとも呼ばれます。したがって、静的以外の位置を持つ包含要素が存在しない場合、それは本体要素の左上隅から配置されます。

あなたの場合、3番目に最も近いコンテナは2番目です。

Question 5

さらに別の明確な答え。

現在のシナリオは次のとおりです。

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

そして、あなたはそれとちょっと苦労しています。

HTMLを変更できる場合は、次のようにします。

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

Question 6

第三の理由div要素が絶対的に第二に配置されているdiv要素は、CSSの仕様を説明しているようにされているのでここでは、「親」要素（良く言った：ブロックを含む）されているための絶対配置要素がない必ずしもその直接の親要素が、むしろ、そのすぐ近くに配置された要素、つまりstatic、たとえば位置が他のものに設定されている要素position: relative/absolute/fixed/sticky;

したがって、コードで可能な限り、3番目のdiv要素を1番目の要素に対して絶対的に配置するdiv場合は、2番目のdiv要素をposition: static;デフォルト値として作成する必要があります（またはposition: ...、2番目のdiv要素のルールセットの宣言を削除するだけです）。。

以上が第一でしょう含むブロックの絶対位置の第三の第二無視して、この位置決め目的のために。divdivdiv

それが役に立てば幸い。

Question 7

誰かがまだこれに対する答えを探している場合に備えて。

この結果を達成するclear: both;には、最初の絶対位置のdivにスタイルを追加して、子をリセットし、それ自体のabsolute位置を使用できるようにしました。