css - 什么时候用绝对定位，什么时候用相对定位

问题描述

问 题

我知道相对定位和绝对定位的定义。但是不知道在什么场合下，合理的使用。有时候写代码觉得两者没有区别。只是参考对象不一样。我项目经验少，各位大神指点下。

解决方案

同楼上，你可以理解为只有相对定位。。。但是有些错误要纠正一下。

要理解定位你要先理解文档流，在文档流中相对定位的元素占有位置，而且会影响后面的元素（块元素、行内块元素），比如两个div并排，另外一个会换行。

<div>111</div>
<div>222</div>

而绝对定位就是把该元素从文档流中踢出，不会占用文档流的位置，也不会影响后面的元素。

<div style="position: absolute;">111</div>
<div>222</div>

如上面的实例，111和222会重叠，审查元素你会发现222有实际位置，111没有位置。他是使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义 。

网页布局涉及到各种设备各种分辨率下的兼容，所以就注定绝对定位不能适用于大部分场景。。所以布局只能依赖于上级元素的位置，而不能依赖于设备的高度和宽度。

适合绝对定位的场景主要是一些页面辅助功能：

弹窗：这个没得说，弹窗的位置肯定是要固定的。

这篇关于css - 什么时候用绝对定位，什么时候用相对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！