Z-index not working as expected - html

Question

I am developing a webpage and I am having problems with z-index not working as expected. My structure looks like this:
<div class="mainWrapper">
<div class="overlay"></div>
<div class="main">
<div class="content1">
content goes here
</div>
</div>
</div>
In overlay, I have a picture that should be above the main-class, but under the content-class. I've tried simply adding different z-indexes, but it does not seems to work. How can I solve this problem? Does this happen because the overlay-div is outside the other divs?

Answer 1

<style>
.mainWrapper{ position:relative; }
.overlay{ position:absolute; }
.main{ position:absolute; }
.content1{ position:absolute; }
</style>
<div class="mainWrapper">
<div class="main"></div>
<div class="overlay"></div>
<div class="content1">
content goes here
</div>
</div>
With absolute positioning, Items will get layered in the order they added to the page. So here, main will be the bottom layer, then overlay on top of that, then content1 above that.

Answer 2

Hard to tell what is happening without seeing the CSS, but...
In order for z-index to work properly, all of the elements you are working with need to be given an explicit position.
Some info:
http://reference.sitepoint.com/css/z-index
http://reference.sitepoint.com/css/stacking

Answer 3

It works with right css like this:
.overlay {
height: 300px;
width: 200px;
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
z-index: 3;}
.main{
height: 250px;
width: 150px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;}
.content1{
height: 200px;
width: 100px;
background-color: yellow;
position: absolute;
top: 0px;
left: 0px;}
.mainWrapper{
position: absolute;
}
example HERE