asp.net – z索引属性未应用

发布时间：2020-12-16 07:38:01 所属栏目：asp.Net 来源：网络整理

导读：我使用以下html标记和css代码来设计我的登录页面. HTML !DOCTYPE htmlhtmlhead runat="server" title/title link href="Styles/Site.css" rel="stylesheet" type="text/css" //headbody style="background:transparent;"div id="divContainer"/div form id="

我使用以下html标记和css代码来设计我的登录页面.

HTML

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body style="background:transparent;">
<div id="divContainer"></div>
    <form id="form1" runat="server">
    <div id="topDiv"></div>

    <div id="divMain">
    <aside><div id="logo">
    <img id="imgLogo" src="Images/minerva.jpg" />
    </div></aside> 
    <aside>
        <div id="divContact"></div>
    </aside>
    </div>
    <footer>
    </footer>
    </form>
</body>
</html>

CSS

#topDiv {
    box-shadow: 0px 10px 20px #888888;
    background-color: #113871;
    width: 100%;
    height: 40px;
}
#logo { }
#imgLogo {
    width: 400px;
    height: 200px;
    margin-top: 20px;
    float: left;
}
#divContact {
    width: 300px;
    height: 400px;
    background-color: White;
    opacity: 0.5em;
    float: right;
    z-index: 9999;
    margin-right: 50px;
    margin-top: 149px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 0 .5em .25em Gray;
}
footer {
    width: 100%;
    height: 150px;
    background-color: #113871;
    display: block;
    float: left;
    margin-top: -100px;
    z-index: -1;
}

我为#divContact指定了z索引值9999,为页脚标记指定了-1.我的问题是我没有得到想要的东西,那就是将divContact放在前面.任何人都可以看看.

解决方法

z-index仅适用于定位元素：

/* This does not work */
.foo {
    z-index: 10;
}

/* This works */
.bar {
    position: relative;
    z-index:  10;
}

资料来源：http://www.w3.org/TR/CSS2/visuren.html#z-index

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!