CSS：positionの考え方

どうも。craysです。

CSSはレイアウトをするのに使うのは周知のとおりですが、
今のお仕事で、positionやfloat指定が良く分からないという声があったのでエントリーしておこうと思う。（あくまで、僕の考えなので参考までに・・・）

---

positionやfloatは位置を指定するのだが、marginやpaddingと混じると理解しづらくなる。
更にはそれを意図したデザインにしていこうとすると・・・Orz

僕の場合、positionやfloatは"レイヤー"として考えています。（浮かぶって言ったほうが分かり易い？）adobeのPhotoShopなんかを使った人には馴染み深いんじゃないかな？

つまり、

• positionやfloatを指定した要素（レイヤー２）
• positionやfloatを指定しない要素（レイヤー１）

という形。

もう少し分かりやすく書くと

   /~~~~~~~~~/
  / Layer2  /
 /_________/~/
  / Layer1  /
 /_________/

こんな感じ。
そしてHTMLの場合、レイヤー１に"レイヤー２が入れる分の余白"があればレイヤー２が入ってくる。

だから、positionやfloatを指定した要素を回り込ませる場合、レイヤー１側のボックスにmarginを使って回り込ませる。

実際にHTMLコードでイメージすると、

<div class="body">
  <div class="side_contents">
    〜ここにサイドコンテンツ〜
  </div>
  <div class="contents">
    〜ここにコンテンツ〜
  </div>
</div>

こんなHTMLで、class="contents"を右に。class="side_contents"を左に表示させる２カラム構成にしたい場合は
（全体の幅を800px。contentsを500px。side_contentsを300pxと仮定）

/* 幅を指定 */
.body{
  width: 800px;
}
.contents{
  width: 500px;
}
.side_contents{
  width: 300px;
}

/* 位置を指定 */
.contents{
  margin-left: 300px;
}
.side_contents{
  float: left
}

とする。

先のAAでイメージすると

   /~~~~~~~~~~~~~~~/                         |     side_contents
  / side_contents /                          | ↑レイヤー２
 /_______________//~~~~~~~~~~~~~~~~~~~~~~~/  |________________
                 /        contents       /   | ↓レイヤー１
   /~~~~~~~~~~~~/_______________________/~/  |     contents
  /               body                   /   |     body
 /______________________________________/    |

 |-----300px---|----------500px---------|
 |-----------------800px----------------|

こんな感じ。

レイヤーというより、レイヤーグループって言ったほうがいいのかな？

＜本日のBGM＞ごまえ〜〜ごまえ〜〜