position_relative&absolute.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <style>
  .main{
	  background:#F00;
	  width:50%;
	  height:200px;
	  margin:60px auto;
	  position:relative;
	  z-index:1;
  }
  .main1{
	  background:#0F0;
	  width:70%;
	  height:100px;
	  position:absolute;
  }
  .mydiv{
	  background:#00F;
	  width:50%;
	  height:160px;
	  position:absolute;
      top:120px;
	  left:20px;
	  z-index:12;
    }
  
 </style>
</head>

<body>
 <div class="main">
  <div class="main1">
  </div>
 </div>
 <div class="mydiv">
 </div>
</body>
</html>