一、CSS 定位属性简介
CSS 中 position 规定了元素的定位方式
CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使元素可以显示在任意位置
（1）、position 属性的可选值包括:
（2）、relative 相对定位
（3）、absolute 绝对定位
（4）、fixed 固定定位
（5）、static 默认值
HTML 正常文档流：
<style type="text/css">
.box-1 { border: 3px solid red; }
.box-2 { border: 3px solid blue; }
.box-3 { border: 3px solid green; }
</style> <div class="box-1">Box-1</div>
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>
二、CSS 相对定位（position:relative）
不脱离文档流布局，只改变自身的位置，文档流原位置遗留空白区域，定位的起始位置为此元素原文档流的位置
<style type="text/css">
.box-1 { border: 3px solid red; }
.box-2 { border: 3px solid blue;
position: relative;
top:20px;
left:30px; }
</style>
<div class="box-1">Box-1</div>
<div class="box-2">Box-2</div>
三、CSS 绝对定位（position:absolute）
脱离文档流布局，遗留下来的空间由后面的元素填充，定位的起始位置为最近的父元素(position不为static)，否则为Body文档本身
<style type="text/css">
.box-2 { border: 3px solid blue;
position: absolute;
top:40px;
left:50px; } …
</style>
<body>
<div class="box-1">Box-1</div>
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
