3 
<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Test z-index</title>
    <style>
        .div1 {position:relative; z-index:1; margin:10px; background:#eee; }
        .div2 {position:absolute; top:14px; z-index:999; background:blue; }
    </style>
</head>
<body>
    <div class="div1" >Lorem ipsum ... <div class="div2">This element I want to be on top!</div> Phasellus fermentum in, dolor.</div>
    <div class="div1" >Suspendisse a pellentesque dui, non felis.</div>
</body>
</html>

http://jsfiddle.net/yMcf6/

div1相対的に配置された2 つの要素があります。

最初の要素の中に絶対要素を入れましたdiv2。div2要素を両方のdiv1要素 (サイト上のすべての要素) の上に配置したい。

問題は、それdiv2が最初のdiv1要素の上にあることですが、2 番目の要素の上にはありませんdiv1。

どうすれば修正できますか？css コードを編集するにはどうすればよいですか?

4

6 に答える 6

1

div22 つの s の外に置くdiv1と、必要なくなりz-indexます。

このような ：

http://jsfiddle.net/yMcf6/7/

div2他の2つのdivの上にあることを明確にするために、フィドルにパディングを追加しました。

HTML は次のようになります。

<div class="div1" >Lorem ipsum ...  Phasellus fermentum in, dolor.</div>
<div class="div1" >Suspendisse a pellentesque dui, non felis.</div>
<div class="div2">This element I want to be on top!</div>
于 2013-05-27T11:44:47.407 に答える
0

このフィドルを参照してください - http://jsfiddle.net/yMcf6/10/

問題は.div1に同じz-indexが含まれていることです。.div1 の内部要素である .div2 の z-index は .div2 には影響しません。この場合、他の要素が含まれているため、.div1 のクラスをもう 1 つ追加する必要があります。

このような -

<div class="div1 has_div2">Lorem ipsum ... <div class="div2">This element I want to be on top!</div> Phasellus fermentum in, dolor.</div>
<div class="div1">Suspendisse a pellentesque dui, non felis.</div>

そしてCSS：

.div1 {position:relative; z-index:1; margin:10px; background:#eee; }
.div1.has_div2 { z-index:5 }
.div2 {position:absolute; top:14px; z-index:999; background:blue; }

:)

于 2013-05-27T11:51:10.113 に答える