[css] position:absoluteがoverflow:hiddenでエリア外に表示されてしまう件
こんにちわ。
cssを信じてやまない、下駄です。
webページのデザインをする時に、まずカラーパターンを作ったり、スケッチデザインから入ったりするのが一般的ですが、僕の場合は、いきなりcssを書き始めてしまうというぐらい、依存しています。
なれるとそっちの方が早いですからね。
本日のIT謎掛け
「position:absolute」と、かけまして、
「プログラムを知らない人に数の始まりを質問した時の答え」と、ときます。
そのココロは・・・
・・・
絶対イチ（1と位置）！と言う
cssのoverflow:hiddenが効かない事がある
まず、下記のソースコードを御覧ください。
|
1 2 3 |
<div style="width:100px;height:100px;overflow:hidden;"> <img src="http://wordpress.ideacompo.com/wp-content/uploads/2020/03/rubik-2477165_1280-150x150.jpg" alt="" width="150" height="150" class="alignnone size-thumbnail wp-image-15773" /> </div> |
ルービックキューブが見切れてしまっていますが、overflow:hidden;をセットしているので、正常です。
次に、この画像にposition:absolute;をセットしてみると・・・
|
1 2 3 |
<div style="width:100px;height:100px;overflow:hidden;"> <img src="http://wordpress.ideacompo.com/wp-content/uploads/2020/03/rubik-2477165_1280-150x150.jpg" alt="" width="150" height="150" class="alignnone size-thumbnail wp-image-15773" style="position:absolute;" /> </div> |
はみ出してしまいました。
内包するオブジェクトを、全てはみ出した箇所を非表示にするはずの、overflow:hiddenが正常に機能していないことがわかります。
原因と解決方法
この減少は、position:absoluteが、親要素から独立した状態になっている事を表しています。
そして、これを解決する方法は、親要素に、position:relativeを設置するだけです。
|
1 2 3 |
<div style="width:100px;height:100px;overflow:hidden;position:relative;"> <img src="http://wordpress.ideacompo.com/wp-content/uploads/2020/03/rubik-2477165_1280-150x150.jpg" alt="" width="150" height="150" class="alignnone size-thumbnail wp-image-15773" style="position:absolute;top:10px;left:10px;" /> </div> |
absoluteが効いていることの確認も含めて、座標を少しずらしてみました。
もう少し深く確認
直の親要素ではなくて、階層の深い上位要素の場合はどうでしょう？
|
1 2 3 4 5 |
<div style="width:100px;height:100px;overflow:hidden;position:relative;"> <div style="border:2p solid blue;width:50px;height:50px;"> <img src="http://wordpress.ideacompo.com/wp-content/uploads/2020/03/rubik-2477165_1280-150x150.jpg" alt="" width="150" height="150" class="alignnone size-thumbnail wp-image-15773" style="position:absolute;top:10px;left:10px;" /> </div> </div> |
“position:absolute”要素は、”position:relative”内部の配下に入っている事がわかります。
内部座標の事を考えると、rekativeはあまり使いたくはないですが、効果的な使い方を考えると、javascriptなどの座標を壊さない程度の設置は必要かもしれませんね。