CSSのPosition指定(absolute)でハマったポイント

2013-05-16 00:00
css

CSSのPositionでabsolute指定とかしてたら何故か他の部分にまで影響してレイアウトが崩れたので何故なのか確認してみた。

崩れた場合のサンプル

f:id:bakunyo:20130516074651p:plain

枠だけグレーの四角がinput要素(text)で、それに対し右上に絶対位置指定で色付きグレーのdiv要素(something)を置いてる。

ここまでは良いんだけど、その次に置きたい枠が緑色のdiv要素(next)が次じゃなくてinputに重なるようにして配置されてしまっている。

サンプルのソースは以下。





position test



修正した

色々試してみたんだけど、次のようにして解決できた。

.box {
    position: relative;
    width: 100px;
    height: 30px;   /* ←高さを指定する */
}

chromeデベロッパーツールで確認したところ、div要素(box)の高さが0となっていて、それを基準に配置していたので結果として重なってしまっていたということ。

結果もきちんと反映されました。

f:id:bakunyo:20130516074446p:plain


« 1ライナーのコマンドを投稿するサイトが面...image_tagでソース指定でハマった »