回答編集履歴

absoluteの挙動について検証して説明を書き直しました

2021/09/30 15:25

投稿

surface_0

スコア497

test CHANGED Viewed

@@ -16,4 +16,40 @@
+ここからは`absolute`の挙動の解説です。
-（ここにabsoluteの挙動について解説したのですが、半分間違っているのでいったん削除しました）
+`position: absolute`は適用させると、その要素は **親要素のレイアウトに影響を与えなくなります。**
+加えて、通常は親要素の幅いっぱいに自動的に広がるというブロック要素のレイアウトの特徴も無くなります。
+ですが、明示的にサイズ指定するか、内側から押し広げれば幅は広がります。
+また、**直近の`position: static`（デフォルト）以外が指定された親要素の幅** に依存するようになります。
+ここで、`label`の唯一の子要素である`.balloon`が`absolute`なので、前述の性質の通り親の`label`の内包レイアウトは幅ゼロになります。
+また、`.balloon`から見て、直近の`static`以外が指定された親要素は`label`であるから、
+`.balloon`は実質幅ゼロのレイアウトに依存することになるので、`min-width:100px`（あるいは画像の幅）がつっぱり棒になる形で最小幅を保つことになります。
+というのが初期状態ですが、なぜ`label`の`absolute`を外すと3列に並ぶようになるかというと、
+`.balloon`の親に`static`以外が指定された要素が存在しなくなることで、**代わりにページ幅に依存するようになる** ので、ページの端に届くまで列の横並びによる幅の拡張ができるようになります。
+この状態では`max-width:400px`が効くようになるので最大3列まで表示されるようになります。
+原理は以上ですが、試しに`label`にレイアウトが保持される`position:relative`にしてやると、今度は`.balloon`が`label`の幅に依存するようになるのを確認できると思います。
+（`inline-block`と`text-align`のおかげで挙動がわかりずらくなってますが）
+わかりずらかったらすいません。

absoluteの説明に嘘が入ってるので修正

2021/09/30 15:25

投稿

surface_0

スコア497

test CHANGED Viewed

@@ -14,34 +14,6 @@
 ---
-ここからは`absolute`の挙動の解説です。
-`position: absolute`は適用させると、その要素は親要素のレイアウトに依存しなくなるため、
+（ここにabsoluteの挙動について解説したのですが、半分間違っているのでいったん削除しました）
-通常は親要素の幅いっぱいに広がるブロック要素は幅を持たなくなります。
-明示的にサイズ指定するか、内側から押し広げれば幅は取られますが、
-`float`は親要素の幅の中で回り込み処理をするものなので、幅に余裕が確保されていないと横並びになってくれません。
-というのが初期状態ですが、なぜ`label`の`absolute`を外すと3列に並ぶようになるかというと、
-`absolute`は親要素がデフォルトの`position: static`以外が指定されていないと適用されないという仕様だからです。
-`.balloon`の親要素である`label`から`absolute`を外すと自動的に`static`となるので、子要素の`.balloon`には`absolute`が適用されなくなります。
-そうすると`display: block`が指定された`label`は、`.balloon`とともにブロック要素本来のレイアウト（幅いっぱい）に広がりますが、`max-width: 400px`で短くなっているということです。
-わかりずらかったらすいません。