css-绝对定位的参考对象

当我们把一下element设为绝对定位时,我们需要寻找绝对定位的参考对象,一般情况下,我们发现是body对象,但这并不是真理.

 

 

当一个绝对定位的对象寻找它的参考对象时,是从它的父结点开始向上寻找的.它的定位参考对象是和它离的最近的并明确设了position属性,但所设值不是static的祖先.

 

按照上面的说法一般没错,但是如果它的祖先中有一个竟然把position设成了inherit,这时,就还要参考它这个祖先的祖先的position属性,是不是有点头大了...我也晕了.

 

重头来过,我们来说position属性,它有四个值：absolute,relative,fixed,static;对于inherit,我不把它作为一个值,因为它最终会转化为上面四个值中的一个值,说白了就是继承它父亲的值.现在,又有情况了：

 

1. 如果有个对象设置position为四个值中的一个值,这时没有疑问.
2. 如果对象根本就没设position属性,那它就是static的.
3. 如果有个对象设置position为inherit,那它就和它父亲取一样的值,比如它的父亲未设position属性,所以参考２：它父亲的position是static的,所以它的position也是static的.

 

 

现在我们可以明确确定一个对象的position属性值了,不管它设不设这个属性,我们都可以计算出这个属性值.

 

回到原先的问题,如果一个对象设置了绝对定位,那它的定位参考对象就是它的所有祖先中,和它离的最近 的并且 postion属性值不是static 的那个祖先.

 

总结完毕,下面有一个写的测试,代码有点乱.

 

　本文链接: 　http://kino.iteye.com/blog/205528 　转载请注明出处,谢谢！