标签:
在对界面布局时,往往需要用到position属性。在W3C中,对position的定义是:规定元素的定位类型。
顾名思义,absolute代表绝对定位。在查阅了相关资料后,发现absolute定位是相对于其包含块(containing block)绝对定位,而这个包含块不一定是父级元素。例如,当父级元素没有设定position属性,而父级以上的某个祖先元素设了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块。也就是说,一个元素的包含块是由其最近的 position 为 absolute / relative / fixed 的祖先元素决定的。如果没有找到,就以initial containing block的左上角进行定位(initial containing block:根元素外层的形状为矩形的元素)。
其“绝对”的含义,在我理解看来,是不受包含块的padding、margin值等影响的“绝对”。再配合该元素本身的Top、Right、Bottom、Left进行定位。
综上所述,absolute属性是用于设置子元素的位置的(相对于包含块)。
(关于绝对定位absolute的属性,可以点击 http://www.zhihu.com/question/19926700 ,2个票数最高的回答都非常精准)
relative代表相对定位。它始终参考父级元素的原始点为原始点,再配合该元素本身的Top、Right、Bottom、Left进行定位。如果没有父级,则以body为原始点。relative的设置效果是受父级元素的padding值等影响的。在实际使用中,我往往使用relative属性作为有absolute属性的子元素的父级。
此外,在设置了position属性后,还可以设置z-index以设置同级元素的上下层关系,数值越大就在上层。
文章末尾,推荐一篇关于CSS定位体系的文章,有助于对position及float属性的理解:http://www.w3help.org/zh-cn/kb/009/
标签:
原文地址:http://www.cnblogs.com/May-study/p/5916189.html