CSS定位详解-优快云博客

css position

css position & top,left,bottom,right are used for position html element.
position has four values:static,fix,relative,absolute.

here is a example to show differents between position's four values:


<?xml version="1.0" encoding="UTF-8" ?>
<!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>css position</title>
		<style type="text/css">
			body {height: 2000px; width: 2000px; background-color: gray;position: relative;left: 100px;}

			/* position */
			.t1 {position: fixed; top: 200px; left: 300px;}
			.t2 {position: relative; top: 50px; left: 100px;}
			.t3 {position: absolute; top: 200px; left: 50px;}

			/* colors */
			.red {background-color: red;}
			.green {background-color: green;}
			.yellow {background-color: yellow;}
			.purple {background-color: purple;}
			.white {background-color: white;}

			/* size */
			div {width: 200px; height: 300px;}
			.wh120 {width:120px; height:120px;}
			.wh60 {width:60px; height:60px;z-index: 1;}
		</style>
	</head>
	<body>
		<div class="t1 red">
			<div class="t3 white wh60"></div>
		</div>
		<div class="t2 green">
			<div class="t3 white wh60"></div>
		</div>
		<div class="yellow"></div>
		<div class="t3 purple wh120"></div>
	</body>
</html>