Div Overlapping With Another Div С изображением

Я создаю строку меню и делаю ее прозрачной, и добавляю изображение в свой * { margin : 0 ; заполнение : 0 ; } . top_nav { height : 80px ; ширина : 100% ; background : rgba ( 0 , 0 , 0 , .5 ); позиция : относительная ; } . контейнер { высота : 638px ; ширина : 100% ; max-width : 100% ; позиция : абсолютная ; переполнение : скрыто ; background-position : center ; top : 0 ; z-index : - 1 ; } . контейнер img { ширина : 100% ; высота : 638px ; } . подробности { высота : 638px ; ширина : 100% ; позиция : абсолютный ; } div, чтобы смотреть изображение позади меню после этого, когда я создаю другой div, который перекрывает друг друга, я хочу, чтобы второй div был виден ниже <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 

position:absolute
container

Я хочу ДИВО название деталь , чтобы показать ниже контейнер сОн изображения введите описание изображения здесь

html,css,html5,css3,

1

Ответов: 1

2

не использовать headerна container, но и использовать его header. поэтому containerостанется на вершине 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>

HTML, CSS, HTML5, CSS3,
Похожие вопросы
Яндекс.Метрика