定位的分类、特点与应用

一、相对定位 position:relative;
特点：
不脱离标准文档流，可以调整元素
参考点：
以原来的位置为参考点

---

二、绝对定位 position:absolute;
特点：
1、脱离标准文档流，不在页面占位置
2、层级提高，压盖现象
参考点：
1、单独给一个盒子设置绝对定位，以根元素页面左上角为参考点
2、相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面根元素左上角进行定位

网站中实战应用：
“子绝父相”设计理念：父元素设相对定位，子元素根据父元素设置绝对定位

---

 

 

三、固定定位 position:fixed;
特点：
1、脱离标准文档流
2、一旦设置固定定位，在页面中滚动网页，固定不变
参考点：
以浏览器的左上角为参考点
应用：
小广告，回到顶部，固定导航栏