开发者

z-index - fixed, absolute, relative

the z-index in "div.dialog" doesnt seem to influ the layer index? the "div.dialog" div has to be on top of everything

EDIT:

  • div.dialog_bg has to be in the background
  • #topfix has to be on top of that
  • div.dialog has to be on top of everything

code...

<!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&l开发者_如何学Got;br>test<br>test<br>test<br>test<br>test<br>test<br>test</div>
        </div>
        <div id="topfix">
            topfix
        </div>
    </body>
</html>


Then you need to give its parent #div_dialog at least z-index: 2 because the z-index is relative to its parent and dialog is the only child of #div_dialog.

Also z-index: 1 for #div_dialog isn't enough because #topfix comes after it in HTML and will be placed over #div_dialog.

EDIT

So regarding your "new" you have to give

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜