CSS 相对|绝对(relative/absolute)

Posted 2023-02-06 tanWFront

原文地址：点击打开链接

 一、position:absolute与float:left是近亲

position:absolute与float:left两者有两大共性：包裹性，破坏性。

包裹性
包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。哦，举个例子吧，如下测试代码：

CSS部分：

.div  padding:20px; margin-bottom:10px; background-color:#f0f3f9; 
.abs  position:absolute; 

html部分：

<div class="div">
    <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    <p>无absolute</p>
</div>
<div class="div abs">
    <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    <p>absolute后</p>
</div>

结果如下图所示：

float也是典型的inline-block化元素，这种元素的inline-block化适用于任何水平的标签。例如平时我们要让span标签支持width属性，可能要设置：

span  display:block; width:100px; 

但是，有float:left/position:absolute撑腰的情况下，display属性就是多余的，可以直接回家喝茶了。

span  float:left; width:100px; 

span  position:absolute; width:100px; 

浮动的破坏性在于切断line box链，致使高度塌陷，但由于浮动元素仍在凡间（DOM tree），实体是看得见摸得着的，所以其占据的实体位置还是在的。而absolute绝对定位不仅让高度塌陷，又由于从未深入凡间，在凡间没有他的实体位置，所以宽度也是塌陷的。

由于浮动身处凡间，所以其造成的破坏是可以通过其他手段弥补的；但是，绝对定位不属于凡间，其破坏无法修复，因为一是孤独，无人帮忙；二是只有空气，怎能修补。

例如下面的测试：
CSS代码：

.div  padding:20px; margin:10px 0 0 10px; background-color:#f0f3f9; float:left; 
.abs  position:absolute; 

HTML如下：

<div class="div">
    <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    <p>图片无absolute</p>
</div>
<div class="div">
    <img class="abs" data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    <p>图片absolute后</p>
</div>

结果如下截图：

想重构高质量的页面，少用绝对定位布局！