nethken nethken - 4 months ago 10
HTML Question

Put the div overlaping the image using CSS

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

Here is what I want to do. I just used paint for this.
enter image description here

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

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

Try position relative, margin in negative values and z-index greater than 1:

.midbar{
      position-relative;
      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;
}
Comments