Div перекрытие

Question

Я пытаюсь создать два <div>, которые перекрываются. Единственная проблема в том, что второй <div> находится перед первым <div>, и должен быть наоборот. Я попытался установить z-index для первого <div> на 1, но он все равно не работает.

Вот мой код:

 #content{
background-color:pink;  
overflow:auto;
position:relative;

}
#content_1{

width:400px;
height:1600px;
background-color:#000099;
margin:0 auto;
z-index:1;
}
nav{

width:300px;
height:500px;
background-color:yellow;


position:absolute;
top:0;  
right:200px;
z-index:0;

}

---

<div id="container">

  <header> </header>

   <div id="content">
       <div id="content_1"></div>
       <nav></nav>
 </div>

  <footer></footer>
 </div>

Как сделать так, чтобы первый div перекрывал второй?

Answer 1

z-индексация работает, когда оба элемента совместно используют один и тот же контекст стека, оба расположены (относительные или абсолютные), и к обоим применяется атрибут z-index.В этом случае вы применили только атрибуты позиционирования и индексации z к одному.

Answer 2

добавить абсолютную позицию к content_1 или добавить относительную позицию