とても便利なDreamweaverのレイヤーデザイン。
しかし、中央揃えのレイアウトに絶対指定でレイヤーを配置しようとしても上手くいきません。
まずは、以下の画像を参照。
中央揃えのレイアウトにDreamweaverでレイヤーを描くと…。
ブラウザのサイズによって表示位置がズレる。
これでは意図したものと全く異なるデザインになってしまう。
-
前述のように、親要素に position:relative を追加してCSSを微調整すると…。
ブラウザのサイズに影響することなく意図した通りに表示される。
ブラウザサイズを変更しても、レイヤーの位置がズレない。
-
まとめ
CSSを用いたレイヤー配置には、絶対指定(absolute)と相対指定(relative)がある。
absolute 親要素から絶対的に配置
relative 通常表示される位置から相対的に配置
中央揃えのデザインに絶対指定でレイヤーを配置する際のポイントは、
親要素をrelative、配置対象をabsoluteにするということ。