ホームページ > 記事 > ウェブフロントエンド > 位置がAbsolute_html/css_WEB-ITnoseの場合について質問する
位置がAbsolute_html/css_WEB-ITnoseの場合について質問する
- WBOYオリジナル
- 2016-06-24 11:22:051178ブラウズ
図のように、絶対的と言われると、左と上が設定されていないと位置を占有しないのですが、これはどう理解すれば良いのでしょうか？
次のコードを試してみました:
<style type="text/css"> .z{ position: relative; background-color: #00c0ef; margin: 10px 20px 10px 20px; } .p{ background-color: #00a65a; position: absolute; width: 200px; }</style><body> <div class=" z"> zpc <div class=" p"> zpc </div> </div></body> その後、実際の効果は次のようなことがわかりました:
つまり、left と top が設定されていない場合、インライン div は外部 div に含まれません。場所を占有しませんが、この原理は一体何なのでしょうか？
ディスカッションへの返信(解決策)
このとき、.pは親要素を使用しなくなったため、.zの相対を記述してもしなくても同じです。参照要素として:
ただし、絶対配置要素に配置された祖先がない場合は、ドキュメント本体を使用し、ページのスクロールに合わせて移動します
このとき、.z の相対要素であっても同じです。 .p が親要素に基づいていないため、記述されるかどうかは関係ありません。 参照要素として:
ただし、絶対位置指定された要素に位置指定された祖先がない場合は、ドキュメント本体が使用され、ページのスクロールに合わせて移動します
.p TRBL が設定されていないのでしょうか?
このとき、.p は書かれていないので、親を参照点として使用する必要があります。
ただし、絶対に配置された要素に配置された祖先がない場合は、ドキュメント本体が使用され、ページのスクロールに合わせて移動します
そうであれば、なぜ div.p はそのようなオフセットを持っているのでしょうか? z と同じ 10px だけ左にオフセットされています。 .p は親要素を参照要素として使用しなくなったため、.z の相対要素が書き込まれます。
ただし、絶対配置された要素に配置された祖先がない場合は、ドキュメント本体が使用され、ページのスクロールとともに移動します。
それとも、TRBL が定義されていない場合は、本文を参照として直接使用しますか?
これが事実なら、なぜ div.p はそのようなオフセットを持っているのでしょうか? z と同じ 10px だけ左にオフセットされています。
絶対位置決めposition:absolute; は、その位置を占有しないことを示します。これは、後続の兄弟要素の位置決めに影響を与えなくなるためです。
これは次のように理解できます。配置されていない要素は 2 次元であり、同じ平面上にあり、互いに影響を及ぼしますが、配置されている要素は 3 次元です。
絶対配置
は実行していることと同等です。もちろん、前の平面には何の影響もありません さらに、もちろん
相対位置決め もこの方法で理解できますが、別の平面に移動するだけでなく、より高圧的になります。ただし、元の平面上の位置もお任せします。
わかるかな？理解できたら、おめでとうございます!次に、
z-index
属性がどのような状況で機能するかについても理解する必要があります