相对定位

设置定位模式为相对定位

	<style>
		#d2{
			 position:relative;
		}
	</style>

设置偏移量

<style>
		#d2{ 
			 left:30px;
			 top:50px;
			 bottom:60px;
		}
	</style>

绝对定位

设置定位模式为绝对定位

<style>
		#d2{ 
			 position:absolute;
		}
		
	</style>

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>相对定位</title>
	<style>
		div{  width:100px;height:100px;  }
		#d1{ background-color:yellow; }
		#d2{ background-color:blue; 
		     /* 设置定位模式为相对定位 */
			 /*position:relative;*/
			 /* 设置偏移量 */
			 /*left:30px;*/
			 /*top:50px;*/
			 /*bottom:60px;*/
			 /* 设置定位模式为绝对定位 */
			 position:absolute;
			 /*left:200px;*/
			 right:50px;
			 /*top:20px;*/
			 bottom:30px;
		}
		#d3{ background-color:red;    }
	</style>
 </head>
 <body>
    <div id="d1"></div>
	<div id="d2"></div>
	<div id="d3"></div>
 </body>
</html>

0 条评论