position プロパティの絶対配置について | ウェブサイト(ホームページ)制作を仕事にするのブログ

昨日の予告通り、「こと」が進むと自分としては嬉しいですね。


それでは、postion プロパティの絶対配置についてです。

早速、ページをご覧いただきましょう。



絶対配置について

絶対配置を使っているのは、ヘッダー部です。分かりやすくするために、赤いラインを引きました。

ロゴとボタンの位置がぶつかっています。ロゴとボタンも背景画像に組み込んだままであれば、なんてことはないのですが、両方とも別な画像として処理しています。

position プロパティを使えば、こんな配置が簡単にできるんですね。


Tips:

親のDivに、position: relative を設定する。

子のDivに、position: absolute それから位置を記述するとこんなに簡単にちょっと複雑と思われる配置がいとも簡単に実現するんですね。


ご存知の方も多いかと思いますが、今まで使っていないようでしたら、ぜひともお試しあれ。


明日も更新予定です。内容は、HTMLの記述のValidatorとCSSの記述のValidatorの紹介の予定です。


それでは。