JavaScript - HTML のレイアウトの問題

Question

position:absolute 属性がよくわかりません。誰かが答えてくれることを願っています、ありがとうございます、

ここで、子pにposition:absoluteを設定した結果、親pが占めていたスペースが消えました

リーリー

リーリー

Answer 1

要素が絶対に設定されている場合、その要素はすでにドキュメント フローから外れているためです。親要素内のスペースを占有しません

Answer 2

最初の例では、親要素には高さが設定されておらず、子要素にも高さがないため、表示されません。

リーリー

ドキュメントフローから切り離された絶対的な位置決めであり、上/右/下/左などの値を設定していないため、同じレベルの2つのPが重なってしまいます

Answer 3

CSS の 4 つの配置方法:

1. static: デフォルトの配置 (つまり、配置なし、配置はドキュメント フローの配置方法に依存します)

2. relative: 相対位置決め、元の位置に対する相対的な位置決め、いわゆる元の位置、つまり relative：相对定位，相对于原始位置定位，所谓的原始位置，即staticpositioning

の位置

3. absolute: 絶対配置。absolute：绝对定位，相对于static定位以外的第一个父元素定位。从当前元素开始向上查找定位元素直至根元素，无论遇到的第一个父级元素是relative还是absolute，或者是fixed定位的元素，当前元素就相对于该元素进行定位，并且这个父级元素不一定是当前元素的第一级父元素。如果没有找到任何非static的父级元素，则相对于根元素htmlpositioning 以外の最初の親要素を基準にして配置されます。最初に見つかった親要素が relative か absolute であるか、

   位置要素であるかに関係なく、現在の要素からルート要素まで上方向に位置要素を検索します。は要素に対して相対的に配置され、この親要素は必ずしも現在の要素の第 1 レベルの親要素であるとは限りません。
以外の親要素が見つからない場合は、ルート要素 html を基準にして配置されます。

4. fixed

: ブラウザウィンドウの位置を基準にした固定位置

初心者は上記のことを覚えておくだけで済みます。

w3school によると:

絶対配置に設定された要素ボックス
は、ドキュメント フローから完全に削除され、
含まれるブロック (ドキュメント内の別の要素または最初の含まれるブロックである可能性があります) に対して相対的に配置されます。

絶対的に配置された要素は、最も近い配置された祖先要素を基準にして配置されます。要素に配置された祖先要素がない場合、その位置は元の包含ブロックを基準とします。

絶対配置では、要素の位置がドキュメント フローから独立するため、スペースを占有しません。

relative的元素。（应该去查下w3c...衰）
什么是包含块？
containing block
css 包含块(Containing Box)
包含块是浏览器计算元素位置的一个虚拟的矩形区域，计算元素定位的起始位置是该矩形区域的左上角，也就是原点，坐标位置为(0,0)，定位元素的top、left
引用文では、正確なステートメントは「最も近い位置にある包含ブロックまたは最初の包含ブロックに相対的」でなければならないと思います。ステートメントが「包含ブロックに相対的」である場合、なぜ少なくとも 相対的でなければならないからです 要素。 (w3c を確認する必要があります...)

封じ込めブロックとは何ですか?

包含ブロックcss包含ボックス包含ブロックは、ブラウザーが要素の位置を計算するために使用する仮想の長方形領域です。要素の位置を計算するための開始位置は、原点である長方形領域の左上隅です。座標位置が ( 0,0) の場合、配置された要素の top と left は原点を基準にして決定されます。包含ブロックは、要素の位置決めの基準フレームです。

この長方形の領域をそれを作成した要素と考えることができますが、それはこの要素ではなく、単なる仮想的なものです。 🎜 リーリー 🎜🎜それを含むブロックは、要素の位置とサイズを計算するためにのみ使用されます。 🎜🎜

親要素が占めていたスペースが消えるのはなぜですか?

形成されるように設定されているため。 position: absolute的元素脱离了文档流（normal flow），形成了独立的BFC。
页面中每个BFC都是独立的一块渲染区域，互不影响，但是它的位置信息，依然由它在normal flow中的包含块决定。
所谓的流就是浏览器将元素在浏览器视口从上到下，从左到右一个一个的排版渲染出来，形成的一个类似水流一样 的概念。
默认一个页面只有一个“流”，就是文档流（normal flow），如果页面有定位元素、浮动元素，就会形成定位流、浮动流，而normal flow由文档的根元素html フローは、デスクトップ上に積み重ねられた紙片として考えることができます。各紙片は「フロー」ですが、これらの紙は必ずしも同じサイズであるとは限りません。

BFC についての私の理解 - wmsj100

Answer 4

1. 主要な親要素には固定の幅と高さがありません。
2. 子要素がフローティングになると、ドキュメントフローから飛び出して親要素を開くことができなくなり、親要素が消えます。

Answer 5

ここでは絶対位置決めとフローティングを組み合わせていますが、初心者にとっては理解しにくいです。理解を容易にするために、この 2 つは分離する必要があります。

絶対位置決めを使用する場合は、次の点に注意してください:

リーリー

フローティングフロートの関連理解については、Baiduを別途参照してください~

Answer 6

親の幅と高さを設定しても、スペースは残ります