ページの一番下に表示するdivを設定する方法

Question

私はメニューバーを作成して透明にし、別の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

下記の2番目のdiv見えるそれはCSSのpositionプロパティについてです。

ソリューション

{ 
    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/