2.相对定位（relative）：特点：相对自身原有位置进行偏移。
仍处于标准的文档流中
随即拥有偏移性和z-index属性。
列如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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>无标题文档</title>
<style type="text/css">
#1{background:#099;position:relative;top:50px;}
#2{background:#903;}
</style>
</head>
<body>
<div id="1">12</div>
<div id="2">13</div>
</body>
</html>
3.绝对定位：absolute。特点：建立了以包含块为基准的定位
完全脱离了标准的文档流。（对兄弟元素没有影响） 随即拥有偏移性和z-index属性。 当一个元素设置绝对定位时，没有设置宽度时，其宽度会随着内容进行调整。
设置偏移参照基准：
无已定位祖先元素，以<html>为偏移参照基准。
有已定位祖先元素，以其最近的定位祖先为偏移参照基准。
列如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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>无标题文档</title>
<style type="text/css">
#1{background:#099;position:relative;top:50px
#2{background:#099;position:absolute;top:50px;height:100px;}
#3{background:#903;height:100px;}
</style>
</head>
<body>
<div id="1">12</div>
<div id="2">13</div>
<div id="3">14</div>
</body>
</html>
相对定位比绝对定位稳定得多，所以通常都用相对定位。
可以设置4个属性值，除了上面3个属性值外还包含固定定位（fixed）属性。
横向两列布局
使用绝对定位实现横向两列布局，应用比较少
使用absolute实现横向两列布局：常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能：
relative--对父元素进行相对定位；
需要注意的是：***固定宽度列的高度要大于自适应宽度的列***因为自适应宽度脱离了标准文档流所以它无法把父元素撑开
absolute--对需要自适应宽度的元素进行绝对定位
1080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
