定位属性（position） 今天刚好学习了盒子模型的布局方式，觉得定位式相对于浮动式要不好理解，决定和大家分享一下，也好巩固一下知识。
目录
1.语法格式
2.静态定位
3.相对定位
4.绝对定位
5.固定定位
下面我就以上顺序总结介绍：
1.语法格式
type="text/css">
.image {
position: static /*relative absolute fixed*/;
}
2 .静态定位 (static)
当position设置值为static或者不设置时，元素按照HTML规则定位（因为静态定位是默认定位方式），定义top、bottom、left、right无意义。
（这里就不做示例了，默认按照HTML布局）
3.相对定位（relative）
即：设置盒子相对其原来位置的定位，相对定位后盒子占用其原页面空间。
默认HTML布局：
示例：
type="text/css">
#st {
width: 30%;
height: 30%;
border: solid;
}
#st img{
width:50%;
height:50%;
}
/*.st-img {
position:relative;
left:50px;
top:50px;
}*/
文章图片
文章图片
运行结果：
文章图片
设置相对定位：
示例：
.st-img {
position:relative;
left:50px;
top:50px;
}
运行结果：
文章图片
可见图2位置并没有什么变化
下面来看
3.绝对定位（absolute）
绝对定位元素会浮于页面之上，不占用原来空间，后续元素会填充空缺的空间。
示例：
.st-img {
position:absolute;
left:50px;
top:50px;
}
运行结果：
【绝对定位|CSS布局盒子模型之定位属性（position)】
文章图片
5.固定定位（fixed）
它是相对于浏览器的窗口定位，以浏览窗口为参照偏移定位。跟绝对定位一样，也会脱离文档流，简单点就是不占空间。
