CSS深入理解之position

参考：http://www.cnblogs.com

最近有小盆友艾特我，说css样式表中的position属性比较难理解，那么，今天我们的主题就围绕position这个属性来聊聊，针对position这个难缠的属性，本文将以小demo的方式来为大家讲解，力求让您看完本文后，对position有着最全面的认识。
position的四个属性值：

relative
absolute
fixed
static
只有设置了属性值之后，我们才能使用offset参数来为我们的元素指定我们想到的位置：
top
right
bottom
left

下面通过小demo分别讲述这几个属性值
例如：
box
icon

demo1.png

显示效果为

demo2.png

一. relative “相对的”
这个属性值相对比较简单，我们要搞清楚它是相对那个对象来进行偏移的。
答案是它本身的位置。在上面的代码中，box ，icon是同级关系，我们可以这样理解，如果不设置relative属性，box的位置按照正常的文档流，它应该处于页面的某个位置，但当设置box为position:relative后，将根据top , right, bottom ,left的值按照它原来所在的位置进行偏移。
比如设置如下css代码：

relative1.png

显示效果

relative2.png

relative的“相对的”意思也正体现于此——以自己为参考。
对于此，您只需要记住，box如果不设置relative时它应该在它本来的位置，一旦设置后就按照它原来的位置进行偏移。
接下来的问题是，icon的位置在那里呢？答案是它原来的位置，它的位置不会因为box增加了relative的属性值而发生改变。
如果，此时把icon的position也设置为relative，会发生什么现象呢？此时依然和box的一样，按照它原来应有的位置进行偏移。
代码如下：

relative3.png

显示效果为

relative4.png

总结：
以上为relative的使用，您只需要记住，它是以自己为参考，根据offset的具体数值进行偏移，但是一般情况下，很少单独使用。

二. absolute“绝对的”
这个属性值总是有人给出误导。说当position属性值设为absolute后，总是按照浏览器窗口来进行定位，这其实是错误的，事实上，这是fixed属性值的特点。

当icon的父对象（或祖父，只要是父级对象）wrap也设置了position的属性，且属性值为absolute或者relative时，也就是，不是默认值的情况下，此时icon按照这个父级wrap来进行定位。
注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以wrap的那个定位点来进行定位呢？如果父级设置了margin, border, padding等属性，那么这个定位点将会从padding开始的地方（即只从padding的左上角开始）进行定位。
代码如下：