0

HTML スタッキングの概念を理解しようとして行き詰まりました。私が読んだことから、divをz-index 2に配置すると、z-index 1のdivの上に表示されるはずですが、そうではありません。

このコード...


<style>
body > div { height: 100px; width: 100px; }

#blue {
    position: relative;
    top: 50px;
    left: 50px;
    z-index: 1;
    overflow: auto;
}
#red { z-index: 2; }
</style>

<div id="blue">
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
</div>
<div id="red">red</div>

...赤の div の上に青の div が表示されます。青の z-index を -1 に変更すると、最終的に赤の div の後ろに配置されますが、スクロールバーが機能しなくなります。

私は何が欠けていますか？

4

1 に答える 1

2

次のフィドルを試してください: http://jsfiddle.net/mVZ9d/

scriptの代わりに2 つのことがありstyleました。質問を書いているときの単なるタイプミスだと思います。position:relative赤い div で指定する必要があります。

z-indexfixedposition 、absoluteまたはの要素でのみ機能しますrelative。フィドルに示されているように、相対は問題なく機能します。

于 2013-03-12T02:13:54.973 に答える