Невозможно заставить z-index работать для div внутри другого div

Я пытаюсь заставить выпадающее меню работать. Он состоит из 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 во ФРОНТЕ теста_1. Я хочу, чтобы test_2 рисовался BEHIND test_1. Как я могу заставить это сделать это? Спасибо за любую помощь.

Ответ 1

Позиционируемый контейнер всегда содержит своих детей. Вы не можете иметь содержимое контейнера под самим контейнером. Смотрите этот тестовый файл, который я сделал (около 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 (но не ниже его фона).