Z 指数 - 固定、绝对、相对



"div.dialog"中的z索引似乎不会影响图层索引? "div.dialog"div 必须位于一切之上

编辑:

  • div.dialog_bg必须在后台
  • #topfix必须在此之上
  • div.dialog必须掌握一切

法典。。。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <body style="margin:0px">
        <style>
            #topfix {
                position:fixed;
                top:0px;
                left:0px;
                width:100%;
                height:130px;
                z-index:1;
                background:#ff0000;
            }
            #div_dialog {
                position:relative;
                z-index:1;
            }
            div.dialog {
                position:absolute;
                background:#ffffff;
                border:1px solid #000000;
                width:400px;
                height:300px;
                top:50px;
                left:100px;
                z-index:99; // doesnt seem to influ the layer index
            }
            div.dialog_bg {
                position:absolute;
                background:#ffff00;
                width:100%;
                height:500px;
                opacity:0.3;
            }
        </style>
        <div id="div_dialog">
            <div class="dialog_bg"></div>
            <div class="dialog">test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</div>
        </div>
        <div id="topfix">
            topfix
        </div>
    </body>
</html>

然后你需要给它的父#div_dialog至少z-index: 2,因为z索引是相对于它的父索引的,dialog#div_dialog的唯一子项。

此外,#div_dialog z-index: 1还不够,因为#topfix在HTML中排在它之后,并且将被放置在#div_dialog上。

编辑

所以关于你的"新"你必须给

#div_dialog { 
     position: absolute; 
     z-index: 9999; 
 }
.dialog_bg { 
   z-index: 1; 
}
.dialog { 
   z-index: 2; 
}

最新更新