CSS position详解

1.首先必须说明的，是浏览器渲染DOM的原理。浏览器根据html中的顺序依次渲染，对文字图片等进行分块，一个块接一个块渲染。

2.接下来，要说明的是，可以设置块的大小。

3.然后看一下position， position属性有四个值，static、relative、absolute、fixed。

    A.static：这个值表示默认，让浏览器按照没有position属性去渲染块，从下图就能看出来，加了position:static和没加是一样的。

 
    B.relative： 在static基础上进行偏移；如往左偏20像素，position:relative;left:-20px;；这里用英文“相对”，指的是相对自己的static位置；而且偏移后，static位置保留空白；偏移后可能与其他框重叠，重叠后的层次是渲染层次（后渲染的框在上面）。
 

    C.absolute：简单的说，absolute与relative的区别是，relative在原来的static位置留白，而absolute不留白。

 
       然后是一个比较复杂的问题，relative是相对于static位置的左上角进行偏移；可absolute的static位置已经被清理了， 它相对于哪里偏移？答案是相对于“离自己最近的非static祖先”的左上角。可能不好理解，直接上例子1，注意块三的位置，偏移原点是body的左上角，这是因为块三的祖先容器依次为：块二、body，而块二的position没有规定，默认为static，再向上就是body了（body再向上没有了）。
 


再看这个，和上一图区别是，我们给块二直接内嵌了一个position:absolute，显示结果完全不一样。首先解释块二，由static变成了absolute，但并没有给出偏移量，所以偏移为0，停留在原来的static位置。再看块四，由于块二是absolute，因此块二的原来的static位置被清空了，块四要代替块二，出现在块一的下方，这就是看上去块二和块四重叠了。至于块三，根据偏移原则，块三的祖先序列是块二、body，而块二就是非static的（注意，如果块二是relative也可以，区别是不会块二块四重叠现象，这里不再上图，请读者自行去验证），所以偏移是相对块二的左上角而言的。




然后还有一个问题，块二和块四究竟谁在上面，谁压谁呢，按照html顺序，应该是四在上面，二在下面。为方便观察，我们添加背景色，块二是灰色，块四是红色。可以看出，二在上面。




为了找出渲染顺序，给块四也加上position:absolute，这回块四在上面。因此，可以总结出，浏览器渲染块，是先渲染所有，然后再依次渲染非static块，后渲染的块在上面。
 


      D.fixed：跟absolute相似，区别是fixed的块，偏移原点始终是window的左上角。也就是说，即便滚动条发生变化，fixed的元素，也不会随着滚动条来回移动
 


4.总结，了解这么多后，提示一个小技巧，相对于body的absolute是很可怕的，设计完的页面很容易乱。我们多数时候，想让块在一个相对的空间内进行absolute偏移，因此，这个相对的起点可以设成relative的，相当于一个锚。