Z-индекс не работает, как ожидалось

Question

Я занимаюсь разработкой веб-страницы и у меня проблемы с z-index, который не работает должным образом. Моя структура выглядит так:

<div class="mainWrapper">
    <div class="overlay"></div>
    <div class="main">
        <div class="content1">
            content goes here
        </div>
    </div>
</div>

В оверлее у меня есть картинка, которая должна быть выше основного класса, но под классом контента. Я пытался просто добавить разные z-индексы, но это не похоже на работу. Как я могу решить эту проблему? Это происходит из-за того, что оверлейный div находится вне других div?

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>

При абсолютном позиционировании элементы будут наслоены в том порядке, в котором они добавлены на страницу.Итак, здесь main будет нижним слоем, затем поверх него будет накладываться слой, а над ним будет content1.

Answer 2

Работает с правильным CSS следующим образом:

    .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;
}

пример ЗДЕСЬ

Answer 3

Трудно сказать, что происходит, не видя CSS, но ...

Для того, чтобы z-index работал правильно, всем элементам, с которыми вы работаете, нужно дать явный position.

Некоторая информация:

http://reference.sitepoint.com/css/z-index
http://reference.sitepoint.com/css/stacking