2

私は数時間、IE7の敵でCSS z-indexと戦ってきました、多分あなたは助けることができます!

私は絶対に配置されたdivを持っており、その親divの上に表示されます。これは素晴らしいことです。ただし、親の兄弟である後のdivの下に表示されます。

z-indexが各divなどのローカルスコープにのみ適用されるように、これは非常に奇妙な動作のように見えます。

ページ上の他のどの要素よりも大きいz-indexを持つように要素を設定すると、それが関係なく一番上に表示されるように設定するにはどうすればよいですか?

これが私のテストページです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="position: relative; z-index: 0">
    div1
    <div style="position: relative; z-index: 0">
        div2
    </div>
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
        div3
    </div>
</div>
<div style="position: relative; z-index: 0">
    div1
    <div style="position: relative; z-index: 0">
        div2
    </div>
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
        div3
    </div>
</div>
<div style="position: relative; z-index: 0">
    div1
    <div style="position: relative; z-index: 0">
        div2
    </div>
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
        div3
    </div>
</div>
</body>
</html>
4

4 に答える 4

0

画像にstyle='z-index:#'を設定できますか、それとも画像を独自のdivに配置する必要がありますか?

于 2012-05-17T15:56:08.360 に答える
0

特にこのコンテナがposition:relativeに設定されている場合、position:absoluteを持つ要素は、そのコンテナ内の絶対位置を取ります。

すべてのposition:ビューポートに従って配置する必要のある絶対要素は、DOMの「body」要素のすぐ下にある必要があります。通常、HTMLコードの最後のbodyタグの直前に配置することをお勧めします。

于 2009-11-03T12:54:49.783 に答える
0

IEには主要なz-indexバグがあります:

Internet Explorerでは、配置された要素は、z-index値0から始まる新しいスタッキングコンテキストを生成します。したがって、z-indexは正しく機能しません。

z-indexを変更することもできますが、両方の要素を表示したい場合は、それらを祖先構造から引き出して、最上位のDOM要素にする必要があります。

于 2009-11-03T13:00:01.893 に答える
0

削除するだけposition: relative

于 2012-01-13T13:45:55.700 に答える