Working with z-index can be a little counter-intuitive at times.
With my redesign I wanted to place a “polaroid” style photo of myself behind the “about” section but in front of the main content and header. If I hadn’t used such large text and a coloured background perhaps I wouldn’t even have noticed what was happening.
Here’s a snippet of the markup—note that the image is semantically connected to the about section so it follows after the section heading.
That Standards Guy
Z-index Stacking Example
Pellentesque habitant morbi tristique senectus ...
About
Pellentesque ...
So what was needed was some straightforward CSS positioning to move the image out of the content flow and place it somewhere off the top-left of the about box. To do this, I first set the
container with position: relative then positioned the image like so:
img#polaroid{position:absolute;top:-160px;left:-85px;}
I’m good to go with using z-index now as you can’t set it without first setting the position property.
img#polaroid{z-index:-1;position:absolute;top:-160px;left:-85px;}
I think without the blue background on the title I would have said job done, but the image was clearly under the h1, not what I was after. I resorted to Thierry’s excellent article on understanding the intricacies of z-index and then on to the css-discuss article on overlapping and z-index. Somewhere in between I hit the solution.
#content{z-index:1;position:relative;}
So there we are! Give some stacking order to the div wrapping your content columns, same again for the column in question (div id="secContent">) and then sandwich the photo between the two with z-index: -1.