这篇文章主要介绍了css position属性和实例应用演示,absolute（绝对定位）,relative（相对定位）,relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下
目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过），以下是w3school对position五个值的解释：
其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）。
1、absolute（绝对定位）
absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。具体案例如下：
position:absolute定位
position:absolute定位测试
这段代码产生的效果如下：
立即学习“前端免费学习笔记（深入）”；
这是设定TRBL之后的效果(设置TRBL以浏览器左上角为原点)，当没有设置TRBL时（没有设置TRBL是以父级对象的坐标为原点），即将p1改成如下代码时
.p1{
width:200px;
height:200px;
background:#0099FF;
/*没有设定TRBL*/
position:absolute;
}
则效果如下：
2、relative（相对定位）
名扬银河企业建站系统，适用于无代码基础的新手，快速搭建企业网站，程序内置了多项实用功能及插件，能够便捷的对网站进行修改、调整、优化等方面进行操作。【部分功能介绍】1、产品管理发布企业产品信息，管理企业产品，自定义产品封面图，产品详情图、文、视频，产品扩展属性自定义等。2、案例管理系统发布企业成功案例，管理成功案例，自定义案例封面图，案例详情图、文、视频，案例扩展属性自定义等。3、资讯管理系统发布企
relative是相对的意思，顾名思义就是相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。具体案例如下：
position:relative定位
position:relative定位测试
代码产生的效果如下：
3、relative与absolute的结合使用
在网页设计时经常会用到浮动来对页面进行布局，但是浮动所带来的不确定因素却很多（例如：IE浏览器的兼容问题）。相对来说，在有些布局中定位使用会更加简单、快捷、兼容性更好（relative与absolute相结合来使用），下面通过网页中的一个实例（网页中的head部分）进行说明，具体代码如下：
@@##@@
@@##@@