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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

cssを信じてやまない、下駄です。
 

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

なれるとそっちの方が早いですからね。
 

本日のIT謎掛け

「overflow:absolute」と、かけまして、
 

「プログラムを知らない人に数の始まりを質問した時の答え」と、ときます。
 

そのココロは・・・
 

・・・
 

絶対イチ(1と位置)!と言う

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

まず、下記のソースコードを御覧ください。
 

 

 

ルービックキューブが見切れてしまっていますが、overflow:hidden;をセットしているので、正常です。
 

次に、この画像にposition:absolute;をセットしてみると・・・
 

 

 

はみ出してしまいました。
 

内包するオブジェクトを、全てはみ出した箇所を非表示にするはずの、overflow:hiddenが正常に機能していないことがわかります。

原因と解決方法

この減少は、position:absoluteが、親要素から独立した状態になっている事を表しています。
 

そして、これを解決する方法は、親要素に、position:relativeを設置するだけです。
 

 

 

absoluteが効いていることの確認も含めて、座標を少しずらしてみました。
 

もう少し深く確認

直の親要素ではなくて、階層の深い上位要素の場合はどうでしょう?
 

 

 

“position:absolute”要素は、”position:relative”内部の配下に入っている事がわかります。
 

内部座標の事を考えると、rekativeはあまり使いたくはないですが、効果的な使い方を考えると、javascriptなどの座標を壊さない程度の設置は必要かもしれませんね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です