CSS之position解释

 

上篇是CSS盒模型，在盒模型的基础上说明一下position定位：

position的四个属性值：

　　1、static

　　2、relative

　　3、absolute

　　4、fixed

下面分别讲述这四个属性。

 

1、static

position的默认属性，在这方面个浏览器解析与渲染是一致的，top，left，bottom，right不产生作用

2、relative

相对定位，重点是“相对的对象”--想对谁？答案是它本身的位置。也就将relative改为static，再在视觉上加上top，left，bottom，right值，就是relative所呈现的视觉效果。

可以这样理解，如果不设置relative时它应该在位置A，一旦设置后就以A为参考点进行偏移。补充一下，top和bottom冲突了怎么办？最后声明的起作用，left和right也是一样的道理。

随后的问题是“对其他标签的影响怎样”。

答案是它原来在哪里，现在就在哪里，可能被遮盖，也可能遮盖其他。若其他元素的position是static那么被遮盖，z-index属性对position是static的元素不起作用，在发生覆盖冲突时，设置z-index：-1且position为非static的元素被position:static的元素覆盖。若其他元素的position是非static那么后面定义的覆盖前面的。此时z-index也起作用，设置了z-index的覆盖方式遵守z-index。

3. absolute
从定义声明position：absolute的元素向外找，第一个position值不是static的元素就是被参考的对象。

再进一步讲，top参照padding的内上线，bottom参照padding的内下线，right和left同理。

遮盖的处理用z-index。

4. fixed
有了上面的解释这个就好理解了，fixed是特殊的absolute，即fixed的参照对象是body，需要注意的是body也是可以有margin和padding的，还有body默认的8px的margin也应该被注意。

以上所写都是主流浏览器使用的，如有例外请留言，当然有什么问题也可以留言讨论！