読者です 読者をやめる 読者になる 読者になる

ばくのエンジニア日誌

技術的なメモなどを書いていきます。

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

このブログ(ばくのエンジニア日誌)はBAKUNOTEに移転しました。

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

崩れた場合のサンプル

f:id:bakunyo:20130516074651p:plain

枠だけグレーの四角がinput要素(text)で、それに対し右上に絶対位置指定で色付きグレーのdiv要素(something)を置いてる。
ここまでは良いんだけど、その次に置きたい枠が緑色のdiv要素(next)が次じゃなくてinputに重なるようにして配置されてしまっている。

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

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>position test</title>
<style>
    .box {
      position: relative;
      width: 100px;
      height: 30px;
    }
    .text {
      position: absolute;
      width: 100px;
    }
    .something {
      position: absolute;
      right: -10px;
      top: -10px;
      width: 20px;
      height: 20px;
      background: #ccc;
    }
    .next {
      position: relative;
      width: 200px;
      height: 50px;
      border: 2px solid #2d5;
    }
</style>
</head>
<body>
<div class="box">
  <input type="text" class="text">
  <div class="something"></div>
</div>
<div class="next"></div>
</body>
</html>

修正した

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

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

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

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

f:id:bakunyo:20130516074446p:plain