最近有小盆友艾特我，说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的左上角开始）进行定位。
代码如下：
absolute1.png
显示效果
absolute2.png
接下来的问题是，假如icon后面还有一个名叫box2的元素，那么它的位置将会怎么布局？由于当position设置absolute后， 会导致icon脱离正常的文档流，它漂浮了起来，此时icon将不占位，box2将会占据icon的位置。
代码如下：
absolute3.png
显示效果
absolute4.png
- 如果icon不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。
总结：
以上为absolute的使用，absolute经常与relative 配合使用， absolute很少单独使用。
三. fixed “固定的”
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器窗口进行定位。
代码如下：
fixed1.png
显示效果
fixed2.png
总结：
一般情况下，fixed单独使用， 不需要与absolute , relative 配合使用。
四. static “静止的／静态的”
position的默认值， 一般不设置position属性时，会按照正常的文档流进行 排列。（在这里就不多做解释了）
网友评论