css之“深入理解position:absolute和position:relative的区别”

<!--四、position:absolute和position:relative的区别-->
<!--1.脱离文档流的区别,就是不会显示新的一行-->
脱离文档流，会造成：父标签的高宽都塌陷了，连它的兄弟float都救不了
<!--如果给div设置，定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在-->
<!--如果给div设置，定位为absolute的层脱离正常文本流，但位置不在存在-->


<!--2.相对的元素不一样-->
<!--relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式，比如：4种定位方式-->
<!--absolute定位的层总是相对于其最近的定义为absolute或relative的父层,如果都没有，就会以body为父层-->


3.display属性的变化-包裹性
a.包裹性换种说法就是让元素inline-block化，也就是说，不管是块级元素还是行内元素，应用了position:absolute之后，display为block，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。哦，举个例子吧，如下测试代码：
b.relative是没有包裹性的，不会改变display的属性



CSS部分：

.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; }
.abs { position:absolute; }
HTML部分：

<div class="div">
    <img src="mm1.jpg" />
    <p>无absolute</p>
</div>
<div class="div abs">
    <img src="mm1.jpg" />
    <p>absolute后</p>
</div>