如何更好得理解position属性

在我们制作网页布局时很多情况要使用position属性。它主要有absolute,solution,static和fixed四个属性值，其中static是默认值，在不写position属性时默认情况下就是static，它遵循正常的文档流对象，会占用文档空间，并且在该属性下，top,right,bottom,left,z-index等属性都是是无效的。

absolute称为相对定位，它是以自身最左上角进行偏移定位，并且原先自身的位置还占据着。它附近的布局不会被破坏。

solution称为相对定位，它是以离它最近的父元素进行偏移定位，如果在没有absolute属性定位时，solution是以body进行偏移定位。所以大多情况我们是配合absolute一起使用。

fixed称为固定定位，它是以浏览器窗口的最左上点作为基点进行偏移定位的。其位置随时跟随浏览器大小的变化而移动，主要用于浏览器窗口的贴边定位。绝对定位(absolute)同样可以应用在固定定位的框架层里面。

以上三种定位属性都是以left,top,right以及bottom这四个属性值进行偏移定位的。

z-index称为对象的层叠顺序，它是以一个整数来定义堆叠的层次，整数值越大，则层叠离我们看到的方向越近。当然这是指同级元素间的堆叠，如果两个对象此属性具有同样的值或者在没有设置层叠顺序时，那么将根据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

总结：当用到以上几个定位属性时，我们会发现在实际应用中有很多的例子，比如纯css制作的“选项卡”，游览器最右下角的“返回顶部按钮”等都用到了定位（position）属性，尤其是在制作“选项卡”时，学好solution属性更为重要了。