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也应该被注意。

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

原文地址:https://www.cnblogs.com/longze/p/2787628.html