Невозможно заставить 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
(но не ниже его фона).