绝对定位

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及文本影响。

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