HTML基礎-04

定位

---

 

定位：經過定位能夠將元素擺放在頁面中任意位置

語法：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)    　　　　　　　　　　　　　只是顏色透明