asked on

cc two divs

Hi Guys

Is it possirble to thave two divs a one overlap one?

see exsample attached

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michael

Give this a shot and see if this is what you're looking for.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>overlapping divs</title>

<style type="text/css">
.divParent {
	margin:0 auto;
	margin-top:20px;
	width:200px;
	height:200px;
	background-color:#660000;
	color:#fff;
	font:Helvetica, Arial, sans-serif;
	font-size:18px;
	padding:18px;
	border:#fff solid 2px;
	
	z-index:10; /* sets the parent div */
}
.divChild {
	margin:0 auto;
	margin-top:20px;
	width:200px;
	height:200px;
	background-color:#CC0000;
	color:#fff;
	font:Helvetica, Arial, sans-serif;
	font-size:18px;
	padding:18px;
	border:#fff solid 2px;
	
	position:relative;
	left:-80px; /* switch these up as needed for your desired postioning */
	bottom:-40px; /* switch these up as needed for your desired postioning */
	z-index:20; /* sets the div higher than the parent div */
}
</style>

</head>

<body>

<div class="divParent"> Base Div
<div class="divChild"> Overlapping Div </div>
</div>

</body>
</html>

Open in new window

Gary

I've requested that this question be deleted for the following reason:

The question has either no comments or not enough useful information to be called an "answer".

Michael

Before closing please take a harder look at the solution I provided... it provides a complete solution with the code to achieve the question asked.