web-dev-qa-db-ja.com

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

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>

なぜ3番目のdiv位置が2番目のdiv（これは1番目のdivに対する絶対位置でもあります）に対して絶対であり、相対的な1番目のdivではありませんポジション ？

3番目のdivは絶対位置の2番目のdivに対する絶対位置であるためです。

htmlcsscss-position
75
pufos

position: absoluteは、position: relativeと同様に、子の相対位置をリセットするためです。

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

84
Pekka 웃

両方 position:relativeおよびposition:absolute配置子として要素を含むことを確立します。

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

ご了承ください position: relativeは、要素がその自然位置とposition: absoluteは、要素が最初のposition:relativeまたはposition:absolute祖先。

21
Mike Tunnicliffe

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

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

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

その後、プロパティleft、right、topおよびbottomを使用して、要素をある程度移動できます。ただし、これにより、要素がページ上にある他の要素と重なる場合があります。これは、必要な効果である場合とそうでない場合があります。

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

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

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

12
Gaurav

さらに別の明確な答え。

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

#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 */
4
valk

3番目のdiv要素が2番目のdiv要素に絶対に配置される理由は、CSS仕様で here が説明しているように、「親」要素（より良い言い方： absolutely配置された要素のブロックを含むis not必ずその直接の親要素ではなく、むしろその直接の要素positioned要素、つまり位置が設定されている要素static以外の任意の例position: relative/absolute/fixed/sticky;

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

上記は、最初のdivを含むブロック 3番目の絶対的に配置されたdivにし、2番目のdivを無視します。

それが役に立てば幸い。

1
atzom