分区重叠
我正在尝试创建两个重叠的
。唯一的问题是第二个
位于第一个
前面,并且必须相反。我尝试将第一个
的 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 与第二个 div 重叠?
I am trying to create two <div>
's that overlap. The only problem is that the second <div>
is in front of the first <div>
and it has to be the other way around. I've tried setting the z-index of the first <div>
to 1
but it still does not work.
Here is my code:
#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>
How can I make the first div overlap the second?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
当两个元素共享相同的堆叠上下文、都定位(相对或绝对)并且都应用了 z-index 属性时,z 索引起作用。在本例中,您仅将定位和 z 索引属性应用于其中之一。
z-indexing works when both elements share the same stacking context, both are positioned (relative or absolute), and both have a z-index attribute applied. In this case you've only applied the positioning and z indexing attributes to one.
将绝对位置添加到
content_1
或添加相对位置add position absolute to
content_1
or add position relative