Overlay один DIV с изображением и текстом над другим

Question

Я пытаюсь создать HTML, как один прилагается здесь.

Я могу создать верхние, средние n нижних div. На среднем div мне нужно иметь еще один div с белым фоном для хранения изображения слева и некоторого текста справа. В нижней части среднего div мне нужно поместить некоторый текст.

Затем в нижней части div мне нужно поместить другой текст.

Основная структура пришла. Но мне понадобится помощь в оверлейной части среднего div. Я не уверен, как поместить белую часть среднего div, как показано в приложении.

Было бы здорово, если бы кто-то помог мне в этом.

Я создал скрипку же http://jsfiddle.net/b2LNc/15/

<div id="top" class="top"> 
    <div id="text"></div> 
</div> 

<div id="middle" class="middle"> 
    <div id="productdetail" class="productdetail"> 


    <div id="image" class="image_container"> 
    <img id="product" class="product" src=""> 
    </div> 
</div> 
</div> 

<div id="bottom" class="bottom"> 
    <h1>heading comes here</h1> 
    <div id="desc"> 
Some text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text here 
</div> 
</div> 

CSS

#top { 
background-color: #777777; 
    width: 977px; 
    margin-left: auto; 
    margin-right: auto; 
height:120px; 
} 
#text{ 
    background-image:url(""); 
background-repeat: no-repeat; 
    height: 60px; 
} 

#middle { 
background-color: #f1f1f1; 
    width: 977px; 
    margin-left: auto; 
    margin-right: auto; 
    height:400px; 
} 
#bottom { 
background-color: #e1e1e1; 
    width: 977px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#bottom h1{ 
    padding: 25px 0 0px 37px; 
    margin-bottom: 0px; 
    font-family: Arial, Verdana, Helvetica, sans-serif; 
     margin-top: 0px; 
} 
#desc{ 
    padding: 10px 10px 20px 40px; 
font-family: Arial, Verdana, Helvetica, sans-serif; 
    font-size: 13px; 
color: #959595; 
line-height: 20px; 
} 

Answer 1

наложения эффект производится путем указания position: relative; для среднего контейнера, так, чтобы использовать его в качестве система отсчета. Содержащий элемент #overlay имеет относительное позиционирование с top: -20px;, которое подтягивает его на 20 пикселей.

этот update к вашей скрипке разрешит проблему с помощью среднего div.

HTML

<div id="container"> 
    <div id="top" class="top"> 
     <div id="text"></div> 
    </div> 
    <div id="middle" class="middle"> 
     <div id="overlay"> 
      <div id="productdetail" class="productdetail"> 
       <div id="image" class="image_container"> 
        <img id="product" class="product" src=""> 
       </div> 
       <div id="descr"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="bottom" class="bottom"> 
     <h1>heading comes here</h1> 
     <div id="desc"> 
      Some text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text here 
     </div> 
    </div> 
</div> 

CSS

#container { 
    position: relative; 
} 
#top { 
    background-color: #000; 
    width: 977px; 
    margin-left: auto; 
    margin-right: auto; 
    height: 120px; 
} 
#text { 
    background-image: url(""); 
    background-repeat: no-repeat; 
    height: 60px; 
} 
#middle { 
    background-color: #f1f1f1; 
} 
#overlay { 
    background-color: #fff; 
    width: 90%; 
    height: 400px; 
    position: relative; 
    left: 50%; 
    top: -20px; 
    transform: translateX(-50%); 
} 
#bottom { 
    background-color: #e1e1e1; 
    width: 977px; 
    margin-left: auto; 
    margin-right: auto; 
    /* height:120px;*/ 
} 
#bottom h1 { 
    padding: 25px 0 0px 37px; 
    margin-bottom: 0px; 
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    margin-top: 0px; 
} 
#desc { 
    padding: 10px 10px 20px 40px; 
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    font-size: 13px; 
    color: #959595; 
    line-height: 20px; 
} 
#productdetail { 
    background-color: white; 
    position: relative; 
    width: 90%; 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
} 
#image { 
    border: 3px #000 solid; 
    display: inline-block; 
    margin: 5px; 
    width: 50%; 
    min-height: 100px; 
} 
#descr { 
    border: 2px #000 solid; 
    display: inline-block; 
    margin: 5px; 
    min-height: 100px; 
    width: 40%; 
} 

Answer 2

Попробуйте эту разметку, который я создал, его чистый и гораздо меньше.

HTML

<div class="wrapper"> 
    <div class="top"></div> 
    <div class="mid"> 
     <div class="container"> 
      <p>Some Text Here</p> 
      <div>IMAGE HERE</div> 
      <div>DESCRIPTION HERE</div> 
     </div> 
    </div> 
    <div class="bot"></div> 
</div> 

CSS

html, body, .wrapper { height: 100%; } 
.wrapper { position: relative; } 
.top { height: 15%; background: #222; } 
.mid { height: 70%; background: #CCC; } 
.bot { height: 15%; background: #777; } 
.container { 
    position: absolute; 
    background: #FFF; 
    padding: 20px; 
    width: 80%; 
    top: 10%; 
    left: 50%; 
    margin-left: -40%; 
    clear: both; 
} 
.container > div { 
    float: left; 
    width: 42%; 
    height: 250px; 
    padding: 1%; 
} 
.container > div:first-child { 
    background: #EEE; 
    float: left; 
    width: 54%; 
} 
.container > p { 
    position: absolute; 
    bottom: -100px; 
    right: 0; 
    border: 1px solid #EEE; 
    width: 50%; 
    height: 70px; 
} 

JSFiddle: https://jsfiddle.net/b289cqkz/1/

Я предопределено высот .content > div с и .content > p Я не могу иметь точные текстовые данные. Вы можете удалить высоты и вставить свои реальные данные для соответствующей настройки.