[原创] css中的绝对定位和相对定位

时间:2024-01-13 17:05:32

我对博客的认识是:记录问题,解决问题,分享知识。如果有*,我不需要造*。

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

对于定位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包含块及其定位判定