我创建了一个菜单栏并使其透明,然后我在我的容器 div 中添加了一个图像以查看菜单栏后面的图像当我创建另一个 div 它相互重叠我希望第二个 div 在容器 div 下方可见
* {
margin: 0;
padding: 0;
}
.top_nav {
height: 80px;
width: 100%;
background: rgba(0, 0, 0, .5);
position: relative;
}
.container {
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img {
width: 100%;
height: 638px;
}
.details {
height: 638px;
width: 100%;
position: absolute;
}
<header>
<div class="top_nav"></div>
</header>
<div class="container">
<img src="http://www.100resilientcities.org/page/-/100rc/img/blog/rsz_resilientcity_headphoto.jpg">
<div id="short-des"></div>
</div>
<div class="details"></div>
最佳答案
这是关于 CSS 位置属性的。
解决方案
{
margin: 0;
padding: 0;
}
.top_nav {
height: 80px;
width: 100%;
background: rgba(0, 0, 0, .5);
position: absolute;
}
.container {
height: 638px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img {
width: 100%;
height: 638px;
}
.details {
height: 638px;
width: 100%;
}
关于html - 如何设置div显示在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40026318/