Div他の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>

私はdivの名前の詳細は、コンテナのdiv画像 enter image description here

Answer 1

の下に表示したくありませんをcontainerに使用しますが、headerに使用してください。そうheaderはcontainerの上に滞在し、detailsは下記参照スニペットやフィドル>jsfiddle

コンテナの下には、それはあなたが

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header { 
 
position:absolute; 
 
    z-index:100; 
 
    width:100%; 
 
    height:80px 
 
} 
 
.top_nav{ 
 
    height: 80px; 
 
    width: 100%; 
 
    background: rgba(0,0,0,.5); 
 
    position: relative; 
 
} 
 

 
.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%; 
 
    position: absolute; 
 
    background:red; 
 

 
}

<header> 
 
    <div class="top_nav"> 
 

 
    </div> 
 
</header> 
 
    <div class="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <div id="short-des"> 
 

 
</div> 
 
</div> 
 
<div class="details"> 
 
</div>