04-17 CSS样式position的值absolute/relative/fixed

1.CSS样式position的值absolute/relative/fixed

参考文章:http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html

总结:

(1)文档流:fixed/absolute/relative都脱离了文档流

(2)参照物的概念:

A.如果一个元素position为absolute,那么他绝对定位的参照对象为最近一个position值为relative的父元素,否则以最顶级父元素(非body也非html元素)为参照物——参照文档中的元素

B.fixed则以当前视窗为参照物——参照当前视窗

(3)position:relative——标记该元素为一个参照物

(4)position值为absolute的元素使用margin的情况(例如:margin-left:30px;margin-top:20px;)——主要确定margin的偏移参照点

A.top/right/bottom/left值为空时,以默认偏移参照点进行偏移(向右偏移30px,向下偏移20px)——默认偏移参照点:该元素在文档流中的左上角


04-17 CSS样式position的值absolute/relative/fixed_第1张图片

B.top/right/bottom/left值不为空,margin的偏移参照点(元素根据参照物top/right/bottom/left定位之后,元素的左上角)


04-17 CSS样式position的值absolute/relative/fixed_第2张图片

你可能感兴趣的:(04-17 CSS样式position的值absolute/relative/fixed)