div 重叠

Question

我正在尝试创建两个重叠的<div>。唯一的问题是第二个<div> 在第一个<div> 的前面，并且必须相反。我尝试将第一个 <div> 的 z-index 设置为 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-index 属性时，z-indexing 起作用。在这种情况下，您只将定位和 z 索引属性应用于一个。

Answer 2

将绝对位置添加到content_1 或添加相对位置