CSSフローティングと絶対位置の関係_html/css_WEB-ITnose

人々はまだ考えることを学ばなければなりません。初めて CSS を学んだとき、フローティングと絶対配置の機能は非常に似ているといつも感じていました。理由は簡単で、要素フローから通常の HTML 要素を作成できるからです。

絶対位置決めの強力な機能と比較すると、フローティングは後述する要素フローから完全に分離されていません。

では、元素の流れからの脱却とは何でしょうか？この問題を理解するには、まず要素フローとは何かを理解する必要があります。私の理解では、要素フローは、次のコードのように、ページ上で html タグが表示される場所であると考えています。

1 <div>2     <p class="p1">p1</p>3     <p class="p2">p1</p>4     <p class="p3">p3</p>5 </div>

 1 div>p{ 2   line-height:20px;   3 } 4 .p1{ 5   background-color:red;   6 } 7 .p2{ 8   background-color:blue;   9 }10 .p3{11   background-color:pink;  12 }

ページ効果

通常、p2 は p1 より下、p3 より上にある必要があります。これは、p2 が通常の要素の流れの中にある場所です。 p2 に left-floating スタイルを追加するとどうなりますか:

p2 は p3 の上にあるように見えますが、まだ p1 の下にあります。同時に、p3 の上のテキストは p2 の下にはありません。これは p2 の半分離です (なぜ半分離なのかというと、その後ろの要素がその下に配置されるだけであり、p1 との関係には影響せず、p3 の上のテキストは影響を受けないためです)。 p2 の下に表示されます)

これについて言えば、要素の流れから実際に何が分離されているのかについてまだ混乱しているかもしれません。実際、CSS は非常に感情的な言語であり、特定の効果を理解するには強力な想像力のサポートが必要です。

たとえば、私たち定命の者は要素の流れから切り離されていない p1、p2、p3 のようなものです。私たちは何世代にもわたって地球上で重力の影響を受け、多くの条件にさらされて生きてきました。一番上の子で、三番目の子が一番小さい子です。ある日突然、二番目の子は一対の翼（浮遊）を生み出し、代々住んでいた場所（元素の流れ）をいつでも飛び出して青空を翔けるようになったが、その後彼は定命の者となった。彼は青い空を征服しただけで、まだ地球を離れることができませんでした。さらに、彼の翼は人工のものであり、その機能は鳥の翼に比べて弱く、兄弟の頭上の青い空を占めることしかできず、位置を変えることはできません（左端または右端にしか移動できません）。私の弟たちも「飛んで」、同じ空の下にいるでしょう。

理解できるかどうかは分かりませんが、これは元素の流れから半ば切り離された状態であることの影響です。しかし、あなたは依然として多くの制限にさらされています。 p3 のテキストが p2 の下にないのはなぜなのか不思議に思われるかもしれませんが、これは実際にはバグではなく、フローティング デザインの本来の目的はテキストの折り返し効果を実現するために提案されたものです。

今、position:absolute、または p1、p2、p3 について話しましょう。 p3 が絶対位置にある場合に何が起こるか:

は、p2 が p3 よりも完全に上にあることを除いて、floating 効果と非常によく似ています。実際、この時点では p2 は p1 と p3 の上にありますが、デフォルトでは自分の頭の上に表示されます。

実際、これも分かりやすいですが、先ほどの浮遊効果は、要素の流れから半分離された p2 によって実現され、直接不滅となって飛び立ちました。地球（元素の流れから完全に切り離されて）、それらを完全に制御します。 頭上の空、そしてその位置は上下左右に制御できます。本当に行きたい場所に行きたくなります。

仏教では、欲望の領域の 6 つの天について、低いものから高いものまで、四天、トラヤサ天、ヤマ天、トゥシタ天、レフア天、その他の変化天について話します。 。これは、レイヤーごとの絶対位置決めの Z インデックスに対応します。ご自身で体験してください。