[原创] css中的绝对定位和相对定位 详解CSS position属性

我对博客的认识是：记录问题，解决问题，分享知识。若是有轮子，我不须要造轮子。

　   首先，定位不管是相对定位仍是绝对定位，必须有一个参考项，而这个参考项，专业术语称之为 包含块，这里的包含块是指在定位时候的包含块，具体有关包含块的概念和意义自行研究。

 对于定位postition属性而言，包含块的断定以下(记住就好，理解了就更好)：

1.根元素的包含块，根元素通常是html元素，有些浏览器会使用body做为根元素，大多数浏览器，初始包含块是一个视窗大小的矩形

2.非根元素的包含块，若是该元素的position是relative或static，它的包含块是最近的块级框，表的单元格或行内块的内容边界

3.非根元素的包含块，若是该元素的position是absolute，则包含块为最近的position不是static的祖先元素。简单来讲，它的包含块会从父级元素一直向上查找，找到第一个position不是static的元素为止。

4.fixed定位很简单，相似与absoulte，可是它的包含块就是浏览器窗口，相对来讲简单不少。常见的应用好比固定导航，回到顶部。

 

参考

1.基础教程

2.详解CSS position属性

3.css的float属性

4.CSS3包含块及其定位断定