[css] position:absoluteがoverflow:hiddenでエリア外に表示されてしまう件

cssを信じてやまない、ユゲタです。 webページのデザインをする時に、まずカラーパターンを作ったり、スケッチデザインから入ったりするのが一般的ですが、僕の場合は、いきなりcssを書き始めてしまうというぐらい、依存しています。 なれるとそっちの方が早いですからね。

本日のIT謎掛け

「position:absolute」と、かけまして・・・ 「プログラムを知らない人に数の始まりを質問した時の答え」と、ときます。 そのココロは・・・ 絶対イチ（1と位置）！と言う

cssのoverflow:hiddenが効かない事がある

まず、下記のソースコードを御覧ください。 <div style="width:100px;height:100px;overflow:hidden;"> <img src="sample.jpg" width="150" height="150"/> </div> ルービックキューブが見切れてしまっていますが、overflow:hidden;をセットしているので、正常です。 次に、この画像にposition:absolute;をセットしてみると・・・ <div style="width:100px;height:100px;overflow:hidden;"> <img src="sample.jpg" width="150" height="150"style="position:absolute;" /> </div> はみ出してしまいました。 内包するオブジェクトを、全てはみ出した箇所を非表示にするはずの、overflow:hiddenが正常に機能していないことがわかります。

原因と解決方法

この減少は、position:absoluteが、親要素から独立した状態になっている事を表しています。 そして、これを解決する方法は、親要素に、position:relativeを設置するだけです。 <div style="width:100px;height:100px;overflow:hidden;position:relative;"> <img src="sample.jpg" width="150" height="150" style="position:absolute;top:10px;left:10px;" /> </div> absoluteが効いていることの確認も含めて、座標を少しずらしてみました。

もう少し深く確認

直の親要素ではなくて、階層の深い上位要素の場合はどうでしょう？ <div style="width:100px;height:100px;overflow:hidden;position:relative;"> <div style="border:2p solid blue;width:50px;height:50px;"> <img src="sample.jpg" width="150" height="150" style="position:absolute;top:10px;left:10px;" /> </div> </div> "position:absolute"要素は、"position:relative"内部の配下に入っている事がわかります。 内部座標の事を考えると、rekativeはあまり使いたくはないですが、効果的な使い方を考えると、javascriptなどの座標を壊さない程度の設置は必要かもしれませんね。