親よりむしろ兄弟のCSS絶対位置指定

私はちょうど絶対的な位置付けについて少し混乱しています。私はいつも、要素を絶対的に配置すると、親要素と相対的に配置されると考えていました（相対的な配置のような通常の位置とは対照的に）。宿題の間、私は今、このような状況に出くわしたと私は混乱している：親よりむしろ兄弟のCSS絶対位置指定

<body> 
    <div> <!-- This is colored red in my example --> 
    ... 
    </div> 
    <div style="position: absolute;"> <!-- This is colored green in my example --> 
    ... 
    </div> 
</body>

私が期待するもの：私が得たもの：私はleftと実際の位置を設定するもちろん

/right/top/bottom私は絶対的に配置された要素から期待するものを得ます。それでposition: absoluteは正確な位置を取るように設定されています。position: absoluteが指定されていないと、明確にするために

出典

2017-12-04 Aram Becker

** top **の位置をリセットしないと、元の位置にスペースが残っています。 – DaniP

[position：top/left/bottom/rightを設定しない絶対値]の重複の可能性あり（https://stackoverflow.com/questions/10243991/position-absolute-without-setting-top-left-bottom-right） – alesc

：

ハズレ「私はいつも、私は要素を配置する場合は、絶対にそれに対する親要素の配置されるだろうと考えています」。要素にposition: absolute;がある場合は、position: relative;またはposition: absolute;が指定されたDOMチェーンの最も近い親を基準にして配置されます。両親がいない場合（つまり、すべてデフォルトであるposition: static）、ドキュメント（ページ）に相対的な位置に配置されます。

位置使用：常に、絶対：

は、あなたが、それはに対して配置したい、と親は位置があることを確認してくださいどのような親に注意してください：相対;その上に。
絶対配置されたオブジェクトの上/右/下/左属性の1つ以上を指定します。

出典

2017-12-04 17:25:14 Morfie

これはOPが探している答えではありません。左/上/右/下が設定されていないと、なぜ*これが機能していないのかを知りたがっています。短い答え：これが設定されていないとき、 'position：absolute'は効果がありません。 – alesc

これは当てはまりません。設定位置：絶対;要素を通常のフローからポップします。ここにデモンストレーションするコードがあります：https://codepen.io/morfie78/pen/mqoXem最初の要素はposition：absoluteを持っています。その上に。これはその要素をポップアウトし、2番目の要素は上に移動します。あなたがポジションを削除した場合：絶対;それは正常に戻ります。 – Morfie

私はちょうど別の答え（私は "可能な重複"としてリンクされている）を質問に私のコメントで参照していた。 – alesc

親よりむしろ兄弟のCSS絶対位置指定

答えて

関連する問題