小粋空間テンプレートで、リキッドレイアウトは、左右のサイドバーにPOSITION:ABSOLUTEプロパティ値を使用していることから、ヘッダーブロックの高さが可変してしまう環境の場合、サイドバーブロックがヘッダーブロックに食い込んでしまいます。これに対する、ひとつの解消法としては、
#box（
#banner（ヘッダーブロック）
#main（POSITION:RELATIVE
#links-left-box（#links-left（左サイドバー））
#content（#blog（.entry（中央カラム）））
#links-right-box（#links-right（右サイドバー））
）--/main--
）--/box--
というように、ヘッダーブロックすぐ下に、サイドバーと中央カラムを包含するブロックをつくり、POSITION:RELATIVEとした上で、サイドバーブロックのTOPプロパティ値を「０」指定することで解消します。（※テンプレートにおけるブロックイメージを表現しています。）
これは、ABSOLUTEの位置決め規則が、「直近する親の布置ボックス（Static以外のRelativeかAbsoluteかFixedの３つを指す。）のパディング辺を基準にする。」仕様を利用したものです。つまり、絶対値指定されているサイドバーブロックを包含する#mainブロックを、RELATIVE布置ブロックとして追加することで、左右サイドバーが、これ（#mainブロック）を基準に配置されるようになるためです。「絶対配置」という言葉が分かりにくくしているため、使い方がよくわからなくなることがありますが、こんな使い方もあります、みたいな。
基本的に長さの指定を”PX《ピクセル》”指定している場合は、画面の解像度に対する相対指定であることから、特にそのままで不具合は生じませんが、”em《エムクワド》”指定した場合、上記のようにしておくと「食い込み」を防ぐことができます。
ただ、この処置をした場合、IE《インターネット・エクスプローラ》ではエントリー内の画像が消えてしまうという現象が発生してしまうことがあります。（FireFoxでは発生しません。）
img要素は、インライン要素なので、そのままの場合は、画像が消えてしまうという現象は発生しませんが、FLOAT:《浮動化》指定したり、DISPLAY:BLOCK《ブロックラインレベル要素》指定した場合は、ブロック要素となり、包含ブロックのPOSITIONプロパティに気をつける必要があります。画像が消えてしまう場合は、img要素をブロック要素とした上で、POSITION:RELATIVEを指定してみると解決する場合があります。
コメントする