html - Z-index は Firefox と IE では機能しますが、Chrome では機能しません

Question

Chrome の z-index に問題があります。オレンジ色の div は、黒い div の後ろに配置する必要があります。Chromeを除いて、そうです。誰でも助けることができますか？状況は次のとおりです。

.page {
    height:900px;
    background:orange;
    width:80%;
    position:relative;
    z-index:8;
    top:120px;
}

http://jsfiddle.net/yXTF6/4/

Answer 1

top-img クラスで z-index を設定していますが、バックグラウンド クラスで行う必要があります

バックグラウンドクラス自体が他のクラスより上にない場合、クラスの子孫でこれを修正することはできません。

編集：

ここにフィドルがあります - http://jsfiddle.net/vals/cTf72/

.top-img {
    height:100px;
    background:black;
    position:relative;
    z-index:9;
}

.top-img にあった z-index: 9 を .background に追加しました

top、page、background は兄弟であるため、z-index をめぐって「競合」します。しかし、そのうちの 1 つが選択されると、その子孫はすべて同じパックに入ります。競合する兄弟がなく、親 (背景) の z-index を変更できないため、top-img に z-index を設定しても意味がありません。

Answer 2

@vals が彼の回答で述べたように、使用していたマークアップでは不可能です。そこで、それを調整して、どのように機能するかをお見せすることにしました。

黒いバーと画像を包んでいた を削除する<div class="background">と、ページを希望どおりに機能させることができます。以前と同じ効果が得られるように、黒いバー<div>と の両方のクラスを調整しました。<img>

ここに jsfiddle へのリンクがあります。

更新されたマークアップと CSS は次のとおりです。

<div class='top-img background'></div>
<img class="background" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJGQ7eqRuhZQqbX1roKW8zBGVHW-VlmQq0uTGCZjDGDHCRljPp" />
<div class='top'>
</div>
<div class='page'>
</div>

そして、CSS

.background {
    position:fixed;
    width:100%;
}
.top-img {
    height:100px;
    background:black;
    z-index:9;
}
img {
    width:100%;
    z-index:7;
    top : 100px;
}
.top {
    position:fixed;
    width:60%;
    height:60px;
    top:60px;
    background:yellow;
    z-index:10;
}
.page {
    height:900px;
    background:orange;
    width:80%;
    position:relative;
    z-index:8;
    top:120px;
}