ヘッダーの高さを広げたが、コンテンツ部がずれない

質問

アメブロの無料テンプレートを入手しました。

ヘッダー画像の高さを広げましたので、その分、コンテンツ部を下にずらしたいのです。
しかし、コンテンツ部の位置がなぜかずれません。

ヘッダー
メニュー(ナビゲーション)
コンテンツ

という構成です。

ヘッダーとメニュー(ナビゲーション)に
position:absolute;
が使われており、ヘッダーとメニューは自由にずらすことができます。

cssはある程度わかりますので、cssのサンプル等あると助かります。

回答No.1

ORUKA1951 · ベストアンサー

absoluteは、ご存知のように絶対配置ですから、それに内包されない他の要素に影響を与えることはありません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
absolute
　ボックスの位置（と場合によっては大きさ）は'left'、'right'、'top'、'bottom'という4つのプロパティで指定される。 これらのプロパティは、ボックスの位置を包含ブロックからの距離として示すものである。 絶対配置のボックスは通常フローには従わないので、兄弟要素のレイアウトに影響を与えない。 また、絶対配置のボックスにはマージンがあるが、これは他のどのマージンとも相殺しない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position )］より

　よって以下のブロックに影響を与えるためには、positionの値をstaticないしrelativeにする必要があります。header内にabsoluteするものがあれば、relativeにする。
　ヘッダーの高さを固定するの方法だと、次に続くブロックの位置をずらすしかないです(relativeならmargin)で、ただし、headerなどはabsoluteを使わないほうが無難です。ユーザーが目が悪くてフォントを拡大したり、あるいはウィドウが狭いと表示されないものが出来たりします。
　基本的にルートにあるコンテナブロックは、ナビゲーションなど一部を除いてabsoluteやfixedさせないほうが無難ですね。

お礼

ありがとうございました。大変参考になりました。
おかげさまでどう修正すればいいのかわかり、うまくいきました。
ありがとうございました。