您现在的位置: 365建站网 > 365文章 > css设置z-index 失效

css设置z-index 失效

文章来源:365jz.com     点击数:600    更新时间:2009-12-15 23:58   参与评论

设置z-index时必须要固定位置,这样设置它的值时才能奏效(例如 position:absolute;)

下面是示例代码,在ff3.5.5和ie5.5~ie8.0RC1中通过,大家可以尝试着不固定其位置试试。

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
      

#king_of_diamonds {
    position: relative;
    background-color:gray;
    width:30px; height:30px;
    left: 145px;
    top: 145px;
}

#ace_of_diamonds {
    position:relative;
    background-color:blue;
    width:300px; height:300px;
    left: 160px;
    top: 130px;
    z-index: 1;
}

        
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="king_of_diamonds">
    a
    </div>
    <div id="ace_of_diamonds">
    b
    </div>
    </form>
</body>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (600人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号