position的幾個屬性：
1、static（靜態(tài)定位）：默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
2、relative（相對定位）：生成相對定位的元素，通過top,bottom,left,right的設(shè)置相對于其正常（原先本身）位置進行定位?？赏ㄟ^z-index進行層次分級。
3、absolute（絕對定位）：生成絕對定位的元素，相對于?static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定?？赏ㄟ^z-index進行層次分級。
4、fixed（固定定位）：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
absolute和relative的使用：
場景：設(shè)計師同學(xué)設(shè)計的樣式和組件的不同，剛開始的時候，想著盡量不要去改組件，畢竟很多人用，后來就用到了relative和absolute這兩個css樣式（最后發(fā)現(xiàn)這種在不同情況下改動位置不同，判斷起來比較麻煩，還是使用添加slot的方法來解決）。
做了如下實驗，設(shè)置了三個div
情況1：
情況2：給第二個div添加父div
<div class="container2">
? ? ? 這是第二個div的父div
? ? ? <div class="div2">這是第二個div</div>
? ? </div>
.container2{
? position: absolute;
? height: 200px;
? background-color: greenyellow;
}
.div2 {
? height:100px;
? background-color: yellow;
? position: absolute;
? top: 50px;
? left: 50px;
}
則結(jié)果如下圖所示container2的寬度由子控件來撐開，div2相對于父div來定位，如果么有”這是第二個div“則如下圖
若將第二個absolute改為relative
注意：上面兩個圖的div與父div的上邊距是不同的，第一個absolute是相對于父div的。第二個是相對于自身位置的。在沒有設(shè)置寬度的情況下，第一個設(shè)置為absolute寬度為文本的寬度，第二個為relative寬度與俯視圖的寬度相同
情況3:保持情況2的兩種情況，都講第二個div的寬度設(shè)置為500px得到效果如下
由上圖可以知道，absolute定位的子元素不會影響父元素的寬度，而relative定位的子元素會撐大父元素。
總結(jié)：absolution：元素會脫離文檔流，定位是相對于離它最近的且不是static定位的父元素而言，若該元素沒有設(shè)置寬度，則寬度由元素里面的內(nèi)容決定，而寬度不會影響父元素定位為absolute之后，原本的位置相當于空的，下面的元素會來占據(jù)。
relative：元素仍然處于文檔流中，定位是相對于原本自身的位置，若沒有設(shè)置寬度，則寬度為父元素的寬度，該元素的大小會影響父元素的大小
技巧2：相對父元素居中有如下設(shè)計稿
button:first-child::after {
? ? ? ? ? ? content: "*首付比例：35%-50%";
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? font-size: 11px;
? ? ? ? ? ? font-weight: regular;
? ? ? ? ? ? top: 43px;
? ? ? ? ? ? color: #9898a4;
? ? ? ? ? ? height: 20px;
? ? ? ? ? ? width: 140px;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? transform: translate(-50%);
? ? ? ? }
讓下面的小字依據(jù)上面的按鈕的寬度，居中顯示可以采用?
?left: 50%;? ? ?transform: translate(-50%);
含義：transform: translate(-50%);?把元素沿著橫向（x軸）移動自身寬度的50%，一般是從左側(cè)為開始點也就是0點。而數(shù)值是-50%，所以是從左側(cè)0點向左移動自身寬度的50%。
參考：https://blog.csdn.net/weixin_42067967/article/details/80152403
