如何设置div显示在页面底部

Question

我创建一个菜单栏并使其透明，我在我的容器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>

Answer 1

关于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%;
}

https://jsfiddle.net/ta1zveue/