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.