我使用以下html标记和css代码来设计我的登录页面.
<!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; }