股利重疊與其他事業部

Question

我在容器中添加圖像在此之後，當我創建另一個DIV它相互重疊的，我想下面的div容器第二個div可見

這是HTML

<header> 
    <div class="top_nav"> 

    </div> 
</header> 
    <div class="container"> 
    <img src="cover.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: 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; 

} 

我想div名稱的細節，以顯示div容器

Answer 1

這裏下面是溶膠ution（fiddle）：

*{ 
 
    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%; 
 
    overflow: hidden; 
 
    background-position: center; 
 
    top: 0; 
 
    z-index: -1; 
 
} 
 

 
.container img{ 
 
    width: 100%; 
 
    height: 638px; 
 
    display: block; 
 
} 
 

 
.details{ 
 
    height: 638px; 
 
    width: 100%; 
 
}

<header> 
 
    <div class="top_nav"> 
 
     top nav 
 
    </div> 
 
</header> 
 
<div class="container"> 
 
    <img src="http://placehold.it/300x300"> 
 
    <div id="short-des"> 
 
     short descr 
 
    </div> 
 
</div> 
 
<div class="details"> 
 
    details 
 
</div>

Answer 2

我想這是你想要fiddle

.container{ 
    height: 638px; 
    width: 100%; 
    max-width: 100%; 
    overflow: hidden; 
    background-position: center; 
    top: 0; 
    z-index: -1; 
} 
.details{ 
    height: 638px; 
    width: 100%; 
    border:solid 1px red; 
} 

去除的位置是什麼：絕對財產

Answer 3

<header> 
    <div class="container"> 
     <div class="top-nav"> 
     </div> 
    </div> 
</header> 


<section class="section-one"> 
    <div class="continer"> 
     <div class="image-outer"><img src="your-image"> 
     </div> 


     <div class="your-title"> 
     </div> 
    </div> 
</section>