絕對定位元素left、right、top、bottom值與其margin和寬高的關系

絕對定位元素(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