how place div on other div

Question

I want to position one div over another div.

CSS:

.fresh_bnr_img {
  float:left;
  width:950px;
  text-align:center;
}

.black_strip1 {
  position:relative;
  top:20px;
  width:120px;
  height:50px;
  background:#000;
  opacity:0.5;
  z-index:999;
}

HTML:

<div class="fresh_bnr_img">
  <div class="black_strip1">Home</div>
  <img src="images/banner-2.jpg" width="946" height="295" alt="fresh-banner" />
</div>

The problem is that when I place the black_strip1 class on the inner div, it appears in the right place but a blank space is appearing before the next div.

Answer 1

give the containing div position:relative; and the child div position:absolute;

the child div will now be positioned with respect to the parent div. (starting from the top left of the parent div)

eg.

.fresh_bnr_img{
 position:relative;
 float:left;
 width:950px;
 text-align:center;
}


.black_strip1{
 position:absolute;
 top:20px; /* 20px from the top edge of .fresh_bnr_img*/
 left:0px; /* 0px from the left edge of .fresh_bnr_img*/
 width:120px;
 height:50px;
 background:#000;
 opacity:0.5;
 z-index:999;
}

Answer 2

I hope it will help you

http://www.templatespoint.com/blog/2010/10/how-to-do-div-on-div/