z index property not applied

asp.net, css, html

Solution

`z-index` only works on positioned elements:

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

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

Source: http://www.w3.org/TR/CSS2/visuren.html#z-index

Problem

I am using the following html markup and css code to design my landing page. 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; } ``` I have given z index value of 9999 for `#divContact` and -1 for the footer tag. My issue is I am not getting what want, that is to bring the divContact into front. Can anyone plase have a look.

Original source