关于position: absolute;和position: relative;问题
来源：2-2 使用Scss 组织地址区域布局
请你摘掉伪善的面具
2021-09-01 23:31:21
相关代码：
.wrapper {
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
padding: 0 0.18rem;
}
这里的position设置为relative可以吗，我试了一下效果一样
css里面关于这个属性我一直觉得很迷，因为脑子里一直记着子绝父相这个口诀，有时候不能灵活应用
1回答
-
同学你好，这里不要使用relative定位。换成relative之后，效果看上去好像一样，但实际有区别，wrapper 的高度并不一样：
使用absolute定位时，wrapper的高度如下：
使用relative定位时，wrapper的高度如下：
原因就是二者的定位参照物不同：设置absolute后，wrapper会相对于整个页面可视区定位，而relative定位则是相对于自身定位。
“子绝父相”这个口诀的意思是子元素absolute后，最好是相对于自身父元素定位；即left、top等属性，是相对于自身父元素计算的。而relative定位，则是相对于自身定位；即left、top等属性是相对于自身初始位置计算的。
本项目中，wrapper的父元素都没有设置relative定位，因此会相对于页面可视区定位。即left、top、right、bottom都是相对于页面可视区的。
使用定位之前，要思考一下，元素相对于谁移动位置；相对于谁移动位置，就可以考虑给谁设置成relative。
另外，二者性质也不同：relative定位的元素，会占用位置，而absolute定位的元素，会不占用位置（可以形象的将其理解成“飘起来”）；如果想让元素覆盖在其他元素之上，则可以考虑使用absolute。
关于二者的应用，同学要先知道二者的区别，然后再大胆的尝试，可以先使用absolute，再换成relative，对比一下区别，用的多了，就能体会了。
祝学习愉快！
0
相似问题