HTML/CSS Fluid Grid: How to overlay div to another div

Question

I'm really having a hard time researching for an answer. I tried to make my div: absolute but it will ruin the whole fluid grid. All I want is to put the div over the background div. Thanks in advance!

CSS

#mannequin {
box-sizing: border-box;
position: absolute;
width: 60%;
padding: 0 12px;
margin: 0;
float: left;
overflow: hidden;
}

#products {
clear: both;
position: absolute;
margin-left: 0;
width: 100%;
display: block;
z-index: 10;
}

HTML

<div id="mannequin"><img src="http://tinypic.com/r/29596hh/9"> 
<div id="products"><img src="http://tinypic.com/r/2qw09lc/9">
</div>
</div>

Answer 1

Define height:100% to #products and top left to 0.

#mannequin {
  box-sizing: border-box;
  position: absolute;
  width: 60%;
  padding: 0 12px;
  margin: 0;
  float: left;
  overflow: hidden;
}

#products {
  clear: both;
  position: absolute;
  margin-left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  left:0;
  top:0;
}