z-index - 固定,绝对,相对

时间:2011-05-12 09:17:50

标签: css

“div.dialog”中的z-index似乎不会影响图层索引? “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>

1 个答案:

答案 0 :(得分:6)

然后您需要至少为其#div_dialog父{1}},因为z-index相对于其父级而z-index: 2dialog的唯一子级。< / p>

#div_dialog z-index: 1还不够,因为#div_dialog位于HTML之后,会放在#topfix上。

修改

所以关于你的“新”,你必须给予

#div_dialog