絕對定位元素(position: absolute)在其相對定位元素(即文件流中最近的非靜態定位祖先元素)中，定位祖先元素的寬度為W，垂直高度為H，則存在以下關係：

元素水平方向

width + left + right + marginLeft + marginRight = W

垂直方向：

height + top + bottom + marginTop + marginBottom =H

由於絕對定位元素的這種特性，所以可以實現偽元素與宿主元素等尺寸效果以及絕對定位元素的水平垂直居中設定。

1、給宿主元素應用 position: relative 樣式，併為偽元素設定 position: absolute，然後再把所有偏移量設定為零，偽元素在水平和垂直方向上都被拉伸至宿主元素的尺寸。這項特徵常用於生成元素的上層遮罩效果。

    <div class='relative'>
        歡迎來到二狗哥的部落格
    </div>

        .relative {
            width:300px;
            height:200px;
            position:relative;
            
        }

        .relative::after {
            content:'';
            position:absolute;
            z-index:999;
            background:rgba(255,0,0,.5);
            top:0;
            right:0;
            bottom:0;
            left:0;   
        }

通過對相對定位的元素宿主元素(.relative)新增絕對定位的偽元素，並將其top:0;right:0;bottom:0;left:0，這樣瀏覽器會自動計算偽元素的寬高，得出其寬高與宿主元素(.relative)一樣大。

width(偽元素)+right(偽元素)+left(偽元素)+marginLeft(偽元素)+marginRight(偽元素)=width(宿主元素)

上面的例子中，margin值未設定，其預設初始值為0。即計算偽元素的寬度中，right(偽元素)、left(偽元素)、marginLeft(偽元素)、marginRight(偽元素)均為0，那麼即偽元素寬度等於宿主元素寬度。

2、;在position:absolute下，top:0;right:0;bottom:0;left:0結合margin:auto的作用，讓確定寬高的盒子水平垂直居中於父元素。

 <div class='relative'>
        <div class='absolute'>
        </div>
</div>

        .relative {
            background: #ccc;
            width: 300px;
            height: 200px;
            position: relative;
        }

        .absolute {
            background: aqua;
            position: absolute;
            width: 50px;
            height: 50px;   
            margin:auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0
        }

絕對定位元素（.absolute）相對於定位元素（.relative）水平和垂直方向居中。由於絕對定位元素（.absolute）的寬高均已經明確，並且定位資料也明確劃定，根據使用者代理需要強制計算margin值（auto）來進行定位。

水平方向：

Width（絕對定位元素） + left（絕對定位元素） + right（絕對定位元素） + marginLeft（絕對定位元素） + marginRight（絕對定位元素）= Width（相對定位元素）

代入數值：

50+0+0+ marginLeft（絕對定位元素） + marginRight（絕對定位元素）=300

marginLeft（絕對定位元素） = marginRight（絕對定位元素）=125