cc two divs

Hi Guys

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

see exsample attached

JCWEBHOSTAsked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
Sure just use the CSS z-index property to manage the stacking order.

Syntax for z-index is here: http://www.w3schools.com/cssref/pr_pos_z-index.asp

If that is not what you need then please gve a more detailed description and a link to the page.

Cd&
0
 
MichaelCommented:
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

0
 
GaryCommented:
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".
0
 
MichaelCommented:
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.
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.