Поместите div, накладывающееся на изображение, используя CSS

Question

Я хочу поместить div над изображением, как показано на рисунке ниже.

Вот что я хочу сделать. Я просто использовал для этого краску.

вот код, который я пробовал, но он не работает, как я и ожидал.

здесь код для DIV и изображение

<img src="<?php echo $newsimage; ?>" alt="court" style="width:100%; height:430px;"> 
<div class="content"> 
    <div class="container"> 
     <div class="row"> 
      <div class="fix midbar"> 
       <div class="viewnews"> 
        <h3><?php echo $title; ?> </h3> 
        <p>Date posted: <?php echo $date; ?></p> 
        <p><?php echo $content; ?></p> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 

здесь стиль DIV и содержание

.midbar{ 
    background:none repeat scroll 0 0 #FFFFFF; 
    padding:19px; 
    width: 850px; 
    box-shadow: 0 0 3px #ccc; 
    display:block; 
    margin-left: 170px; 
    margin-top:-150px; 
    background-color: gray; 


} 


.content { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: 100px; 
} 
.content:after { 
    content: ""; 
    display: block; 
} 

Answer 1

Try положение относительно, запас в отрицательных значений и г -индекс больше 1:

.midbar{ 
     position:relative; 
     margin-top:-40px; 
     z-index:10; 

     background:none repeat scroll 0 0 #FFFFFF; 
     padding:19px; 
     width: 850px; 
     box-shadow: 0 0 3px #ccc; 
     display:block; 
     margin-left: 170px; 
     margin-top:-150px; 
     background-color: gray; 
} 

Answer 2

.content { 
    background-color: gray; 

} 

Answer 3

Используйте position:relative и z-index:10 для вашего класса. Например:

.midbar{ 
     position:relative; 
     z-index:10; 

     padding:19px; 
     width: 850px; 
     box-shadow: 0 0 3px #ccc; 
     display:block; 
     margin-left: 170px; 
     margin-top:-150px; 
     background-color: gray; 
} 

Answer 4

Я надеюсь, что это должно сработать.

<div class="content"> 
     <div class="container"> 
      <div class="row">   
       <div class="fix midbar"> 
        <div class="viewnews"> 
<img src="<?php echo $newsimage; ?>" alt="court" style="width:100%; height:430px;"> 
         <h3><?php echo $title; ?> </h3> 
         <p>Date posted: <?php echo $date; ?></p> 
         <p><?php echo $content; ?></p> 
        </div> 
       </div> 

      </div> 
     </div> 
    </div> 
.content { 
    min-height: 100%; 
    margin-bottom: 100px; 
}