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などの座標を壊さない程度の設置は必要かもしれませんね。
