定位的分类、特点与应用
一、相对定位 position:relative;
特点:
不脱离标准文档流,可以调整元素
参考点:
以原来的位置为参考点
二、绝对定位 position:absolute;
特点:
1、脱离标准文档流,不在页面占位置
2、层级提高,压盖现象
参考点:
1、单独给一个盒子设置绝对定位,以根元素页面左上角为参考点
2、相对于最近的非static祖先元素定位,如果没有非static祖先元素,那么以页面根元素左上角进行定位
网站中实战应用:
“子绝父相”设计理念:父元素设相对定位,子元素根据父元素设置绝对定位
三、固定定位 position:fixed;
特点:
1、脱离标准文档流
2、一旦设置固定定位,在页面中滚动网页,固定不变
参考点:
以浏览器的左上角为参考点
应用:
小广告,回到顶部,固定导航栏
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步