元素定位属性position的使用详解

做后端的认为做前端的很牛，能设计出各类独特的界面。做前端的认为后端的很难，尤其是各种业务逻辑。其实我想说的是大家都不容易，程序员更不容易。
想要学习好CSS，我们就要系统化，模块化的学习每一个知识点。最近在论坛中遇到有人问position，我就在这里专门写一篇文章来讲解它。
position属性是用来定位元素的。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
position的默认值为static。即没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。它的其他取值如下：

position:absolute;我们都知道absolute是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。绝对定位也可以理解为相对定位的一种特例，对象为浏览器而已。图解如下：

根据经验来说，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。

position:relative;他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。图解如下：

根据经验来说，有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

position:fixed;他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。常见的用法，有返回顶部，顶部导航菜单，对联广告等。
如有疑问，请加qq群：454796847共同进步！原文地址：http://www.xttblog.com/?p=297

： » 元素定位属性position的使用详解