定位 定位：通過定位可以將元素擺放在頁面中任意位置 語法：position屬性設置元素的定位 可選值：static：預設值，開啟定位 relative開啟相對定位 absolute開啟絕對定位 fixed開啟固定定位 相對定位：當元素設置position:relative;開啟元素的相對定位 1 開 ...
定位
定位：通過定位可以將元素擺放在頁面中任意位置
語法：position屬性設置元素的定位
可選值：static：預設值，開啟定位
relative開啟相對定位
absolute開啟絕對定位
fixed開啟固定定位
相對定位：當元素設置position:relative;開啟元素的相對定位
1 開啟相對定位，元素不會發生任何變化
2 開啟相對定位後，元素不會脫離文檔流
3 相對定位的元素，是相對於其在文檔流中的位置進行定位的
4 相對定位會使元素提升一個層級（可以遮蓋其他塊）
5 相對定位不會改變元素的性質，塊還是塊，行內還是行內
當元素開啟定位後，可以通過四個方向的偏移量（offset）來控制元素的位置：
top:元素與其定位位置的頂部距離
bottom：元素與其定位位置的底部距離
left:元素與其定位位置的左側距離
right:元素與其定位位置的右側距離
絕對定位：（難點：參照物？？）當元素設置position:absolute;開啟元素的絕對定位
1 絕對定位會完全脫離文檔流
2 絕對定位會改變元素的性質，行內變塊，塊寬高被內容撐開
3 開啟絕對定位後若不設置偏移量，元素的位置不發生變化，位置還在那裡
4 絕對定位會相對於離它最近的開啟了定位的祖先元素進行定位
5 絕對定位會使元素提升一個層級（層級優先順序：文檔流<浮動<定位）
<div class=’box1’>
<div class=’box2’>
<div class=’box3’></div></div>
</div>
定位時的參照物：
若box2設置absolute，box3與box2原點對齊；若box2未開，box1開，與box1對齊；否則與body對齊
若所有祖先元素都未開啟絕對定位，則相對於HTML標簽進行定位
一般情況，我們為一個元素開啟絕對定位，會同時為它的父輩元素開啟相對定位
絕對定位元素會相對於它的包含塊進行定位
包含塊：
對於絕對定位元素來說，包含塊就是離它最近的開啟定位的塊元素
若沒有開啟定位的祖先元素，則其包含塊是網頁中的初始包含塊（html為初始包含塊）
開啟絕對定位後，佈局的公式新加入四個屬性：
水平方向：
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含塊的寬度
絕對定位元素水平方向佈局的等式：auto+auto+0+0+200px+0+0+auto+auto=500px
垂直方向：
top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含塊的高度
此時有五個值可設置為auto：left/right/margin-left/margin-right/width
在包含塊中居中：
left:0;
right:0;
margin:0 auto;
全部居中（上下左右）
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
Margin:auto;
固定定位：當元素設置position:fixed;開啟元素的絕對定位
特點與絕對定位一樣，不同點：相對於瀏覽器的視窗（視口）進行定位
粘滯定位：電話部：王，李---粘滯其姓
.l1{
position:sticky; 將l1標簽的內容黏貼
top:0;
background-color:#bfa;
}
.l1{ 將l2標簽的內容黏貼
position:sticky;
top:20px;
background-color:#bfa;
}
層級：開啟定位元素會提升一個層級，定位元素層級可以同z-index來設置，z-index需要一個整數作為參數，值越大層級越高
父元素的層級再高，也不會蓋住子元素；
若z-index的值相等，則後面元素會蓋住前邊元素；使用z-index時，需要開啟 定位；
position:relative;
z-index:n;
設置不透明顏色度：方法一：opacity:0-1；（不，完全透）------0.5：半透明 元素整個透明（文字）
方法二：rgba(0,0,0,0.5) 只是顏色透明
