Why is Z-index not working here?

Question

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.

do you mean like this? http://jsfiddle.net/7gK5U/2/ – Netorica Jan 02 '13 at 07:46 — Netorica, Jan 02 '13 at 07:46

score 1 · Accepted Answer · answered Jan 02 '13 at 08:09

1

you are not given any background color for header, footer and sidebar section. otherwise it is working just fine.

answered Jan 02 '13 at 08:09

naresh kumar

2,165
3
19
21

Just to confirm is this markup good for such a scenario or anything else is better? – Hardeep Singh Jan 02 '13 at 08:22

score 0 · Answer 2 · answered Jan 02 '13 at 07:49

It seems to be working, only thing is that your header / footer don't have any background (color). And being transparent you just see the content through it.

If you add a background color to the header and footer, you can see the content going under them.

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

I think that morksinaanab have right, but You can also add padding-bottom to .main. Try to add:

.main { 
/* Your code */
padding-bottom: 85px; } /* the height of padding should be at least the same amount that footer height + 5px for space */

edited May 23 '17 at 12:31

Community

1
1

answered Jan 02 '13 at 08:07

bumerang

1,776
21
30

Why is Z-index not working here?

3 Answers3