定位的分类、特点与应用

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



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

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


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

猜你喜欢

转载自www.cnblogs.com/nanjo4373977/p/12419110.html
今日推荐