html position定位说明 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{border:1px red solid;}
		</style>
	</head>
	<body>
		<!--如果父级元素没定位,子级定位用absolut,会跳出父级,至到使用position定位的父级,-->
		<div style="width: 300px; height:300px;">
			<div id="" style="width:250px;height:250px;">
				
				<div id="" style="width:50px; height:50px;">
					2
				</div>
				<div id="" style="width:50px;height:50px;">
					3
				</div>
			</div>
			
		</div>
		<br />
		<div style="width:500px;height:500px;">
			<div style="width: 300px; height:300px; position:relative;">0
				<div id="" style="width:250px;height:250px;top:10px;right: 20px;">
					1
					<div id="" style="width:50px; height:50px;">
						2
					</div>
					<div id="" style="width:50px;height:50px; position:absolute;top:5px;right: 10px;">
						3
					</div>
				</div>
			
			</div>
			
		</div>
		<br />
		
		<div style="width: 300px; height:300px;">0
			<div id="" style="width:250px;height:250px;position:relative;top:10px;right: 20px;">
				
				<div id="" style="width:50px; height:50px;">
					2
				</div>
				<div id="" style="width:50px;height:50px; position:absolute;top:5px;left: 10px; border:1px solid #0000FF">
					3
				</div>
			</div>
			
		</div>
		
		
		
	</body>
</html>

　　

posted @ 2018-10-10 16:52  Gosun  阅读(196)  评论(0)  编辑  收藏  举报