position的relative和absolute属性

Posted 2020-08-11 忘记木槿

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