position的relative和absolute属性

     在对界面布局时,往往需要用到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/

     

原文地址:https://www.cnblogs.com/May-study/p/5916189.html