2009年6月2日火曜日

日本一わかりやすいpositionの使い方解説

cssのpositionについて、なんとなくわかりにくいんだよな~・・という感じで避けている人のために、がんばって、日本一わかりやすい「positionプロパティの使い方」解説を考えてみました。

css position

で検索するといろんな解説サイトが出てきますが
positionプロパティとすべての値との関係を列挙してあるページは、やっぱり初心者には「難解!」なわけです。
ということで小難しい解説や基礎知識は別ページを見ていただくとして、
すごーいおおざっぱにざっくりと解説するとこんな感じです。




一番よく使うパターンを図式にしてみました。

要点はこれだけ
1)親ボックスの基準点を決める
基準点を持ってる親ボックスに、position:relative;を入れておく

2)位置を確定したいボックスには、width height top leftの4点セットで
幅、高さ、基準点からの距離を指定する。
このボックスに position : absolute; をつける


というわけです。
簡単でしょ?
floatで制御できなくて四苦八苦してる時にこれを使いこなせると結構便利です。

ちゃんと使いこなそうと思ったら、全部の値の意味や指定方法を知らないといけないかもしれませんが、ぶっちゃけ難しいのでpositionプロパティを全部理解しようと思うと、使おうと思う前に挫折します。(ってわたしがそうだったΣ(;・∀・)ヾ

position解説ページ



参考になったよ!って方はwebの森のfacebookページへイイネをしてね(v^ー゜)



webの森のFBページへも来て下さい