bodyにz-indexを指定すると子孫要素の背景指定が無視される

症状

body要素にz-indexプロパティを指定したページでは、body要素の孫要素やより下位の要素の背景指定が無視され、body要素やbody要素の子要素の背景で塗りつぶされてしまう。

例示

<body style="position:relative; z-index:0;">
<div style="padding:1em; background:#f00;">
<div style="padding:1em; background:#0f0;">
<div style="padding:1em; background:#00f;">
赤・緑・青
</div>
</div>
</div>

赤、黄緑、青の背景が外側から順に表示されているはずです。

スクリーンショット

Ns7.1Netscape7.1標準モード

WinIE6.0WinIE6.0標準モード

補足

不具合の発生する要素にwidthプロパティやheightプロパティを指定することで不具合を回避することができます。

<div style="padding:1em; background:#f00; width:90%;">
<div style="padding:1em; background:#0f0;">
<div style="padding:1em; background:#00f;">
赤・緑・青
</div>
</div>
</div>

修正状況

  • WinIE6.0の標準モードと互換モードで不具合の発生を確認しました。

関連記事

スポンサーリンク

URLをハイフン区切りからアンダーバー区切りやキャメルケースにする方法

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る