Web前端-HTML&CSS筆記之09
Web前端-HTML&CSS筆記之09
1002-P69~P74
定位
總述
定位（position）是一種更高階的佈局手段，通過定位可以把元素放到頁面的任意位置，可以使用position屬性來設定定位。
position的可選值
- static 預設值，元素是靜止的沒有開啟定位
- relative 開啟元素的相對定位
- absolute 開啟元素的絕對定位
- fixed 開啟元素的固定定位
- sticky 開啟元素的粘滯定位
相對定位
position:relative;
特點：
- 開啟相對定位後，如果不設定偏移量，元素不會發生任何的變化。
- 相對定位是參照元素在文件流中的位置進行定位的。
- 相對定位會提升元素的層級。
- 相對定位不會使元素脫離文件流。
- 相對定位不會改變元素的性質，塊還是塊，行內還是行內。
偏移量（offset）：當元素開啟定位以後，以通過設定偏移量來設定元素的位置
top:10px; 定位元素和定位位置上面的距離，值越大元素越向下移動。
bottom 定位元素和定位位置下面的距離，值越大元素越往上移動。
left 定位元素和定位位置左面的距離，值越大元素越往右移動。
right 定位元素和定位位置右面的距離，值越大元素越往左移動。
#以上只對開啟了定位的元素有效
定位元素垂直方向的位置由top和bottom兩個屬性來控制，通常情況下我們只會使用其中一個。類似的水平方向的位置由left和right兩個屬性控制，通常情況也是隻會使用一個。
絕對定位
當元素的position屬性值設定為absolute時，則開啟了元素的絕對定位。
絕對定位的特點：
- 開啟絕對定位後，如果不設定偏移量元素的位置不會發生變化。
- 開啟絕對定位後，元素會從文件流中脫離。
- 絕對定位會改變元素的性質，行內變成塊，塊的高寬被內柔撐開。
- 絕對定位會提升元素的一個層級
- 絕對定位元素時相對於其包含塊進行定位
包含塊（containing block）
-
正常情況包含塊就是離當前元素最近的祖先塊元素
-
絕對定位的包含塊
- 離它最近的開啟了定位的祖先元素
- 如果所有的祖先元素中都沒有開啟定位，則根元素就是它的包含塊
-
html（根元素、初始包含塊）
固定定位
將元素的postion屬性設定為fixed則開啟了元素的固定定位
固定定位也是一種絕對定位，所以其特點大部分和絕對定位一樣
唯一不同的是固定定位永遠參照於瀏覽器的視口進行定位。它不會隨網頁的滾動條滾動
粘滯定位
position:sticky;
特點和相對定位基本一致，不同的是可以在元素到達某個位置時將其固定。
該屬性相容性不好，一般不用。（沒錯，說的就是ie
絕對定位元素的位置
- 水平佈局
開啟了絕對定位以後，必須滿足等式
left + margin-left + border-left + padding-left + widith + padding-right + border-right + margin-right + right =包含塊的寬度
相較於之前，增加了 left 和right 兩個值，此時規則和之前一樣，當發生過度約束時
-
如果9個值沒有auto則自動調整right值以使等式滿足
-
如果有auto的值，則自動調整auto的值，以使等式滿足
-
可設定auto的值
- margin
- widht
- left
- right
-
left和right 的值預設是auto，所以當 不設定left和right，則當等式不滿足時，會自動調整它兩。
-
垂直方向的局
以下等式也必須滿足
top + maring-top/bottom + padding-top/bottom + border-top/bottom + bottom + height =包含塊的高度
使一個元素水平垂直居中(在包含塊中間)
.box1{
margin: auto;
left:0;
right:0;
top:0;
bottom:0;
}
元素的層級
-
對於開啟了定位元素，可以通過 z-index 屬性來指定元素的層級
-
z-index需要一個整數作為引數，值越大元素的層級越高，元素的層級越高越優先顯示。
-
如果元素的層級一樣，則優先顯示靠下的元素
-
祖先的元素的層級再高也不會蓋住後代元素（偉大的父愛：）