Блог

Главная - Вопросы по программированию - Z-индекс работает не так, как ожидалось

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

#html #css #z-index

#HTML #css #z-индекс

Вопрос:

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

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

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

Комментарии:

1. пожалуйста, опубликуйте свой CSS. Я подозреваю, что вы не используете абсолютное позиционирование

2. z-index требует, чтобы позиционирование было не- static . Потратьте некоторое время и прочитайте спецификацию , оно того стоит.

Ответ №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 над этим.

Ответ №2:

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

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

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

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

Ответ №3:

Это работает с правильным 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;
}

пример ЗДЕСЬ