Не удается получить z-index для работы с div внутри другого div - PullRequest
Новая
       25

Не удается получить z-index для работы с div внутри другого div

15 голосов
/ 16 декабря 2010

Я пытаюсь заставить работать выпадающее меню. Он состоит из LI с DIV, который появляется при наведении LI. Я хочу, чтобы родительский элемент был нарисован перед дочерним элементом, чтобы я мог создать эффект вкладки с перекрывающимися границами. Я не могу заставить ребенка оказаться за родителем.

Следующий код имеет ту же проблему: 

<div id="test_1">
    Test 1
    <div id="test_2">
        Test 2
    </div>
</div>

и CSS 

#test_1 {
    border:1px solid green;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    z-index:999;
}

#test_2{
    border:1px solid red;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    top:-10px;
    left:-10px;
    z-index:900;
}

Приведенный выше код будет рисовать test_2 в FRONT test_1. Я хочу, чтобы test_2 был нарисован ВНИЗ test_1. Как я могу заставить это сделать это? Спасибо за любую помощь.

1 Ответ

36 голосов
/ 16 декабря 2010

Позиционированный контейнер всегда содержит своих дочерних элементов.Вы не можете иметь содержимое контейнера ниже самого контейнера.См. этот тестовый файл , который я сделал (около 7 лет назад), показывающий ситуацию.

Обратите внимание, в частности, что темно-синий div равен z-index:-100, но не отображается ниже его z-index:3 родительский контейнер, но не ниже другого z-index:2 контейнера, который является его «дядей» (родным братом его родителя).

z-index элемента действителен только в отношении других элементов, использующих тот жепозиционированный контейнер.Как только вы установите position:relative на test_1, вы заставите его z-index оказаться в другом мире, нежели z-index из test_2.Самое близкое, что вы можете сделать - установить #test_2 { z-index:-1 }, чтобы оно отображалось ниже содержимого #test_1 (но не ниже его фона).

...