position定位，CSS入門必備, 好像之後有個更厲害的flex！

定位

可經過position屬性還設置元素的定位。

　　​可選值：static 默認值 沒開啓

​ 　　　　　　relative 開啓相對定位

​　　　　　　 absolute 開啓絕對定位

​ 　　　　　　fixed 開啓固定定位（絕對定位的一種）

　　開啓定位後可經過left、right、top、bottom四個屬性來設置元素偏移量。

　　left：元素相對於其定位位置的左側偏移量。（距離左邊多少 ——— 向右移）

　　一般只需選擇其中兩個就可對元素進行定位。（水平垂直方向各一個）

 

relative

　　一、相對定位指相對於元素在文檔流中原來的位置進行定位。

　　二、開啓相對定位的元素不會脫離文檔流。故相對定位不會改變元素性質，

　　　  即塊仍是塊，內聯仍是內聯。

　　三、相對定位會使元素提高一個層級。（定位元素能夠蓋住文檔流元素）

　　四、開啓相對定位而不設置偏移量時元素不會發生任何變化。

　　.box1{

​ 　　　　position:relative;

​ 　　　　left:100px;

　　}

absolution

　　一、絕對定位是相對於離他最近的開啓了定位的祖先元素進行定位的。

​ 　　　　若全部的祖先元素都沒有開啓定位，則相對於瀏覽器的窗口。

　　　　​ 故通常開啓了子元素的絕對定位都會同時開啓父元素的相對定位。

　　二、開啓絕對定位的元素會脫離文檔流。故絕對定位會改變元素性質，

　　　　內聯會變成塊，塊的寬高默認都被內容撐開。

　　三、絕對定位也會使元素提高一個層級。

　　四、開啓絕對定位而不設置偏移量時元素位置不變化。

 

fixed

與絕對定位不一樣的地方：

　　一、固定定位永遠相對於瀏覽器窗口進行定位。

　　二、固定定位會固定在瀏覽器窗口的某個位置，不會隨着滾動條而滾動。

　　　　（廣告、視頻、回到頂部等）

　　三、ie6不能兼容固定定位。

 

元素的層級

　　一、若定位元素的層級同樣，則下邊的元素會蓋住上邊的元素。（代碼後寫的蓋住先寫的）

　　二、可經過z-index屬性來設置元素的層級。

​ 　　　　爲z-index指定一個正整數做爲其值，該值將會做爲當前元素的層級。

​ 　　　　　　a、層級越高，越優先顯示；

​ 　　　　　　b、父元素的層級再高，也不會蓋住子元素；

​ 　　　　　　c、對於沒有開啓定位的元素不能使用z-index.

 

背景圖片

　　一、設置背景圖片的重複方式：

​ 　　　　可選值：repeat 默認值（雙方向重複）

​　　　　　　　　 no-repeat 不重複（有多大就顯示多大）

​ 　　　　　　　　repeat-x 背景圖片沿水平方向重複

​　　　　　　　　 repeat-y 背景圖片沿垂直方向重複

　　二、若背景圖片大於元素默認顯示圖片的左上角，同樣大就所有顯示，小於就平鋪。

　　三、語法：background-image：url（相對路徑）；

　　四、可同時給一個元素指定背景顏色和背景圖片，則背景顏色將成爲圖片底色。

　　　　（通常同時指定）

　　五、背景圖片默認貼着元素的左上角顯示。

​ 　　　　可經過background-position來調整背景圖片在元素中的位置。

​ 　　　　　　a、該屬性可以使用top、bottom、left、right、center中的兩個值來指定。

​ 　　　　　　　　若是隻給一個值，則第二個之默認爲center。

​ 　　　　　　　　「九宮格「 top left 左上； center center 居中；

​ 　　　　　　b、也可直接指定兩個偏移量： 水平偏移量 垂直偏移量

　　六、可經過background-attachment設置背景圖片是否隨頁面一塊兒滾動。

​ 　　　　可選值：scroll 默認值 背景圖片隨窗口滾動

​　　　　　　　　 fixed 背景圖片會固定在某一位置 （不隨窗口滾動的圖片通常設置給body）

　　七、背景的簡寫屬性

​　　　　background屬性可同時設置全部背景相關樣式。

　　　　無順序、數量要求，不寫的樣式則使用默認值.

 

​ 示例：background:#bfa url(img/1.jpg) center center no-repeat fixed;