CSSビギナー向け 陥りがちな罠Vol.01
position:absolute; の位置が合わない!編
『絶対配置うまくいかなーーーい!何よ、コレ。』という方向けのネタ。
個人的な意見だが、フルCSSでのレイアウトをこれから実践しようかという際、大枠のレイアウトやある部分だけのレイアウト問わず、まずはfloatでの左右に分けたコンテンツ配置をしようって人が多いように思う。んでもって少し慣れてきた頃に絶対配置でもそろそろやってみようかって流れになる。(あくまで予想)
そんな際、陥りやすいのが「position:absolute;って絶対的な位置を決めるはずなのになんかうまくいかない」みたいな罠。
左揃えのレイアウトの際はあまり気づかない事も多いのだが、全体を中央揃えのレイアウトにしていると、ページ左上を基点としての位置指定になるのでおかしな表示になったり。 思い通りの位置になる予定がどうにもこうにも狂ってるんですけどーという場合のお話。
結論から言うとそれはabsoluteの「基点」を設定していないからうまくいかないだけ。「基点」=「その絶対配置の基準となる位置」
CSSを部分的に覚えたりしていると少し足らずの部分が出てくる。
positionプロパティを使いたい場合は必ずrelativeとabsoluteはセットで覚えた方がいい。なぜならよっぽどシンプルな作りでない限り、absoluteはrelativeを必要とするからである。
<< 初心者向けの新カテゴリ作りました。 | 構造文書の大切さ >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/96
コメント (2)
こんばんわ。
こういうお話待ってました!
CSSのレイアウトっていろいろなパターンがあるけど、僕はフロートしかやった事がありません。相対配置とか絶対配置も使えるようになればもっといろんな事ができるんだろうなーと思ってます。この機会にやってみようかな。もっと勉強しなきゃいけないことがたくさんありすぎてなかなか追いつきませんけど(汗)
投稿者: ごう | 2007年03月01日 23:34
>ごうさん、こんばんわ。
絶対配置はいろいろと便利ですよー。
複雑なデザインをコーディングする時とかに重宝しています。是非是非やってみてくださいませ(w
投稿者: Red | 2007年03月02日 02:02