position的relative和absolute属性

Posted 忘记木槿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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/

     

以上是关于position的relative和absolute属性的主要内容,如果未能解决你的问题,请参考以下文章

css中position属性:absolute和relative

通过案例理解position:relative和position:absolute

CSS position绝对定位absolute relative

探究position定位中absolute和relative的异同

今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;

position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别?