绝对定位

position:absolute对文档的影响

首先明确绝对定位的参考:

1、如果自己没有指定宽高，宽高以设置了position：relative的祖先元素为参考对象，如果没有祖先元素设置了position：relative，则以浏览器窗口为参考。
2、父元素如果没有设置固定高度将崩塌。

自己没有设置TRLB：

以父元素content左上角为原点因为会被父元素的margin和padding影响。
如果父元素内，自己的前面还有文本或者其他没有脱离文档流的元素，原点将在前面的元素换行后的左上角。

css

    body,html{        margin: 0;        padding: 0;    }    .container1{        background: #FFFF80;        margin: 5;        padding: 4;        width: 100px;        height: 100px;        position: relative;    }    .container2{        background: #c0c0c0;        margin: 5;        padding: 4;        width: 20px;        height: 50px;    }    .super1{        width: 100%;        height: 100%;        background: #80FF00;        position: absolute;    }    .super2{        width: 50%;        height: 50%;        background: #FF80C0;        position: absolute;    }

html

<div class="container1">    <div class="container2">    口            <div class="super1">            </div>            <div class="super2">            </div>    </div></div>

super12的父元素是container2但container2没有设置position。继续向外层查找，找到最近的祖先元素container1设置了position：relative，并以container1的宽高作为参考渲染。

但container2中super12的前面还有文本没有脱离文档流，原点将变为文本元素换行后的左上角。

且两个super相互独立互不影响。

自己设置TRLB：

父元素对应的margin和padding失效。
以设置了position的祖先元素的content左上角为原点，会被这个祖先父元素的margin影响，但不会被padding影响。
比如：

css

        body,html{        margin: 0;        padding: 0;    }    .container1{        background: #FFFF80;        margin: 5;        padding: 4;        width: 100px;        height: 100px;        position: relative;    }    .container2{        background: #c0c0c0;        margin: 5;        padding: 4;        width: 20px;        height: 50px;    }    .super1{        width: 100%;        height: 100%;        background: #80FF00;        position: absolute;        top:0;    }    .super2{        width: 50%;        height: 50%;        background: #FF80C0;        position: absolute;        left: 0;    }

html

<div class="container1">口    <div class="container2">    口            <div class="super1">            </div>            <div class="super2">            </div>    </div></div>

我们可以看到绿色的super1的top设置为0后不再受container2的margin和padding影响，甚至container1的padding也被忽略，前面的文档也被覆盖，但是我们没有设置他的left,他的横向位置依然受container2的margin和padding影响。

super2的left设置为0后不再受container2的margin和padding影响，container1的padding也被忽略，但他的纵向依旧不变依然被父元素的margin，padding及文本影响。

总而言之，绝对定位乃神人。