Overlay one Div over another's padding, using z-index and position relative to parent Div?

Hi,

 I'm trying to get two Divs to overlap and the top one to be placed over the bottom ones Padded area. Tried the code below but obviously this aligns the top Div to the browser.

How would I position it relative to the bottom Div? As a side not I also need to keep the current layout for  #Background and #mainCont as is.

Thanks.
<style type="text/css">
<!--
html, body {
	margin: 0 auto;
}
 
#background {
	text-align: center;
	width: 1680px auto;
	height:100%;
	background-color: #FF6600 ;
}
#mainCont {
	text-align:left;
	margin: 0 auto;
	width: 1300px;
}
#test1 {
	padding: 20px;
	background-color:#00FF33;
	width:200px;
	height:60px;
}
#test2 {
	background-color:#3399CC;
	width:40px;
	height:20px;
}
 
.overlap {
position:absolute;
left:20px;
top:0px;
z-index:1;
}
-->
</style>
 
 
 
<div id="background">
  <div id="mainCont">  
    <div id="test1">test1</div>
    <div class="overlap" id="test2">test2</div>
  </div>
</div>

Open in new window

sany101Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
David S.Connect With a Mentor Commented:
Give #mainCont position:relative

More information: http://www.dynamicsitesolutions.com/css/layout-techniques/#abs_rel_pos
0
 
RapturerCommented:
Hi Sany,

This one is easy...you have your overlapped div content within another div that is not.

This will get it done for you:

#test2 {
        background-color:#3399CC;
        width:40px;
        height:20px;
        left:120px;
        top:30px;
           
}
0
 
sany101Author Commented:
Thanks Kravimir you don't know how long I spent scratching my head on this one.... Works a dream and thanks for the link info.

Repturer that didn't seem to work for me but thanks for the imput.

If only they where all this simple.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.