Possible Duplicate:
z-index not working with fixed positioning
I am creating a app that has a fixed header and footer and a fixed left sidebar. Everything is okay except that z-index property is not working. I have set z-index of the header and footer as 1000 and that of the main div as 1. So the header and the footer should be stacked over the .main div. But the result is not the same.
<!DOCTYPE html>
<html>
<head>
<title>Sample Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="header fixed-top">
<div class="header-inner">
<ul class="nav">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</div>
</div>
<div class="sidebar-left-fixed">This is the left sidebar. This should remain fixed.</div>
<div class="main">And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br />And here comes the content division.
<br /></div>
<div class="footer fixed-bottom">
<div class="footer-inner">footer</div>
</div>
</body>
</html>
And this css:
a{
color: #777;
text-decoration: none;
text-shadow: 0 1px 0 white;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;padding:0;
margin:0;
}
ul{
margin:0;padding:0;
position:relative;
list-style-type:none;
}
li{float:left}
.nav > li > a{padding: 10px 15px 10px;}
.fixed-top{
position:fixed;
top:0;right: 0;
left: 0;
z-index:1000;
}
.fixed-bottom{
position: fixed;
right: 0;
left: 0;
margin-bottom: 0;bottom: 0;
z-index:1000;
}
.header-inner{
border-bottom:solid 1px #eee;
min-height: 40px;
z-index:1000;
position:relative;
}
.footer-inner{
border-top:solid 1px #eee;
min-height: 80px;
position:relative;
z-index:1000;
}
.sidebar-left-fixed{
position:fixed;
left:0;
width:250px;
border-right:solid 1px #eee;
height:100%;
top:40px;
}
.main{
margin-top:40px;
margin-left:250px;
margin-right:0;
min-height:600px;
border-right:solid 1px #eee;
border-bottom:solid 1px #eee;
padding:5px;
z-index:1;
position:relative;
}
Note: If there is some other good way to get this design, it is welcomed.
you are not given any background color for header, footer and sidebar section. otherwise it is working just fine.