上一篇我们讲到了div的基础样式，本篇我们来看一下div的定位、边距和浮动，由于年底工作较忙，内容可能分几次更新，请见谅。
我们先看一个定位的例子：
<!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=gb2312" />
<title>div及其样式、属性</title>
</head>
<body>
<div style="width:200px; height:200px; background:#CCCCCC">
<span style="font-size:18px; font-weight:bold">正常定位div一</span>
</div>
<div style="width:200px; height:200px; background:#666666">
<span style="font-size:18px; font-weight:bold">正常定位div二</span>
</div>
<div style="width:200px; height:200px; background:#00FFFF; position:absolute; left:150px; top:100px;">
<span style="font-size:18px; font-weight:bold">绝对定位div</span>
</div>
<div style="width:500px; height:500px; background:#CCCCCC">
<div style="width:200px; height:200px; position:relative; background:#999999; left:100px; top:100px;">
<span style="font-size:18px; font-weight:bold">相对定位div</span>
</div>
<div style="width:350px; height:200px; background:#00FFFF"></div>
</div>
</body>
</html>
position：这个属性来控制div的定位方式，有三个常用的选项static、relative、absolute。
static是默认的选项，生成正常的div。absolute可以理解为绝对定位，relative可以理解为相对定位。
absolute：绝对定位可以理解为相对于浏览器左上角的位置定位。使用了绝对定位后，当前div在整个文档中不占空间，不影响本div外的其他内容的位置使用了定位后，对应控制方为的四个属性为：top、bottom、left、right。分别控制内容的上、下、左、右。当然同一个控件中定义了距离左边多少，就不可再定义距离右边多少了。也就是top、bottom只用一个，left、right也只用一个。
relative：相对定位是相对于父级容器定位。使用了相对定位后，当前div不会影响本div外文档中其他控件的位置。但是本div定位前的位置和控件会保留在文档中。
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
