Put the div overlaping the image using CSS

Question

I want to put the div above the image as shown in example image below.

Here is what I want to do. I just used paint for this.

here is the code I have tried, but its not working as I expected.

here is the code for the div and the image

 <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>

here is the style of the div and the content

 .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 position relative, margin in negative values and z-index greater than 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;
}