1. 程式人生 > >固定定位

固定定位

當元素的position屬性設定fixed時,則開啟了元素的固定定位
			固定定位也是一種絕對定位,它的大部分特點都和絕對定位一樣
	不同的是:
			固定定位永遠都會相對於瀏覽器視窗進行定位
			固定定位會固定在瀏覽器視窗某個位置,不會隨滾動條滾動
IE6不支援固定定位
	
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定定位</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: yellow;
			position: fixed;
			left: 0px;
			top: 0px;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color: yellowgreen;
		}
	</style>
</head>
<body style="height: 5000px;">
	<div class="box1"></div>

	<div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
		<div class="box2"></div>
	</div>

	<div class="box3"></div>
</body>
</html>