首页 > 什么时候用绝对定位,什么时候用相对定位

什么时候用绝对定位,什么时候用相对定位

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


绝对定位可以用在相对定位内,那么0点坐标就是拥有相对定位属性元素的左上角位置。实际应用中灵活性很大。


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

要理解定位你要先理解文档流,在文档流中相对定位的元素占有位置,而且会影响后面的元素(块元素、行内块元素),比如两个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属性定义 。

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

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

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


你可以理解成只有相对定位,没有绝对定位。绝对地位只是基于浏览窗口(如果我没记错的话,这说法可能不严谨),相对定位是相对于父元素。然而父元素是浏览窗口时,它就同时是相对定位和绝对定位了。所以时刻搞清楚父元素是哪个,子元素使用绝对定位,父元素使用相对定位,个人使用经验很好掌控位置。你可以按照你自己喜欢的方式来进行。

之后接触到响应式时使用手法会有调整,所以现在这个阶段不必想太多按照自己手法吸取多点实践经验。


相对定位:占用原先位置,会影响后面元素排版,适用于微调该元素位置
绝对定位:脱离标准文档流,适用于覆盖其他元素

【热门文章】
【热门文章】