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-indexing在两个元素共享相同的堆栈上下文时都起作用，它们都位于相对位置或绝对位置，并且都应用了z-index属性。在这种情况下，您只将定位和z索引属性应用于其中一个。

Answer 2

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