css相对定位和绝对定位

<html>
<head>
<title>css相对定位和绝对定位</title>
<style type = "text/css" >
	body,div {
		margin:0;
		padding:0;
		height:2000px;
	}
	#div1 {
 		width:200px;
		height:200px;
		background-color: red;
		position:absolute; 
		z-index:2;
		/*
			left:100px; 
			top:20px;	
			1.采用相对定位后,left和right, top和bottom只能设置一个
			2.相对定位,相对于原来的位置而言。设置相对定位的元素依然会占用原                           来的空间。仍在标准流中。
		*/
	}
	#div2 {
		width:200px;
		height:200px;
		background-color:#369369;
		position:absolute;
		left:20px;
		top:20px;
		z-index:-1;
		 /*
			3.绝对定位,针对body页面左上角而言的。left看不出来的,
			  只有top,bottom才可以看出与relative的区别
			4.设置为绝对定位的元素不会占用原来的空间,会脱离标准流
		*/
	}
	#div3 {
		width:200px;
		height:200px;
		background-color:blue;
		/* 
		position:fixed;
		left:20px;
		top:50px;
		
			5.固定定位,与绝对定位一样都会脱离标准流
			6.固定定位,针对浏览器窗口而言的。absolute针对body(0,0)而言的。
		*/
	}
	
		/*
			重叠元素的堆叠顺序 z-index ;前提是只有设置了以上三种定位才有用。
			设置的数值越大,堆叠越在上层。也可以用负值。
			
		*/
</style>
<meta charset = "utf-8" />
<!--<link rel = "stylesheet" style = "text/css" href = "style/css.css" />-->
</head>
<body>
	<div id = "div1" >div1</div>
	<div id = "div2" >div2</div>
	<div id = "div3" >div3</div>
	
</body>
</html>


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。