Did you know that you can have a negative value for a z-index? I didn’t! Until now, that is. I was having a problem at work with two absolutely positioned DIVs. One wouldn’t stack itself on top of the other even when I gave it a higher z-index. I struggled all day on it and at the very end of the day I, mostly out of desperation, threw in a z-index of -1 on the DIV that was supposed to be behind and VOILA! It worked! I had no idea it was possible. I don’t really know why giving the DIV that was supposed to be on top a higher value wasn’t working in this case but I tested it out with just two DIVs in a document and the styles in the header. And I tested it in the major browsers: IE6, IE7, IE8, Firefox, Chrome and Safari.
Try it:
.box1{
position:absolute;
display:block;
float:left;
width:150px;
height:150px;
background:red;
z-index:-1;
}
.box2{
position:absolute;
display:block;
float:left;
width:100px;
height:100px;
background:blue;
z-index:1;
}