定位
可通過position屬性還設定元素的定位，
?可選值：static 默認值 沒開啟
? relative 開啟相對定位
? absolute 開啟絕對定位
? fixed 開啟固定定位（絕對定位的一種）
開啟定位后可通過left、right、top、bottom四個屬性來設定元素偏移量，
left：元素相對于其定位位置的左側偏移量，（距離左邊多少 ——— 向右移）
通常只需選擇其中兩個就可對元素進行定位，（水平垂直方向各一個）
relative
1、相對定位指相對于元素在檔案流中原來的位置進行定位，
2、開啟相對定位的元素不會脫離檔案流，故相對定位不會改變元素性質，
即塊還是塊，行內還是行內，
3、相對定位會使元素提升一個層級，（定位元素可以蓋住檔案流元素）
4、開啟相對定位而不設定偏移量時元素不會發生任何變化，
.box1{
? position:relative;
? left:100px;
}
absolution
1、絕對定位是相對于離他最近的開啟了定位的祖先元素進行定位的，
? 若所有的祖先元素都沒有開啟定位，則相對于瀏覽器的視窗，
? 故一般開啟了子元素的絕對定位都會同時開啟父元素的相對定位，
2、開啟絕對定位的元素會脫離檔案流，故絕對定位會改變元素性質，
行內會變成塊，塊的寬高默認都被內容撐開，
3、絕對定位也會使元素提升一個層級，
4、開啟絕對定位而不設定偏移量時元素位置不變化，
fixed
與絕對定位不同的地方：
1、固定定位永遠相對于瀏覽器視窗進行定位，
2、固定定位會固定在瀏覽器視窗的某個位置，不會隨著滾動條而滾動，
（廣告、視頻、回到頂部等）
3、ie6不能兼容固定定位，
元素的層級
1、若定位元素的層級一樣，則下邊的元素會蓋住上邊的元素，（代碼后寫的蓋住先寫的）
2、可通過z-index屬性來設定元素的層級，
? 為z-index指定一個正整數作為其值，該值將會作為當前元素的層級，
? a、層級越高，越優先顯示；
? b、父元素的層級再高，也不會蓋住子元素；
? c、對于沒有開啟定位的元素不能使用z-index.
背景圖片
1、設定背景圖片的重復方式：
? 可選值：repeat 默認值（雙方向重復）
? no-repeat 不重復（有多大就顯示多大）
? repeat-x 背景圖片沿水平方向重復
? repeat-y 背景圖片沿垂直方向重復
2、若背景圖片大于元素默認顯示圖片的左上角，一樣大就全部顯示，小于就平鋪，
3、語法：background-image：url（相對路徑）；
4、可同時給一個元素指定背景顏色和背景圖片，則背景顏色將成為圖片底色，
（一般同時指定）
5、背景圖片默認貼著元素的左上角顯示，
? 可通過background-position來調整背景圖片在元素中的位置，
? a、該屬性可使用top、bottom、left、right、center中的兩個值來指定，
? 如果只給一個值，則第二個之默認為center，
? “九宮格“ top left 左上； center center 居中；
? b、也可直接指定兩個偏移量： 水平偏移量 垂直偏移量
6、可通過background-attachment設定背景圖片是否隨頁面一起滾動，
? 可選值：scroll 默認值 背景圖片隨視窗滾動
? fixed 背景圖片會固定在某一位置 （不隨視窗滾動的圖片一般設定給body）
7、背景的簡寫屬性
? background屬性可同時設定所有背景相關樣式，
無順序、數量要求，不寫的樣式則使用默認值.
? 示例：background:#bfa url(img/1.jpg) center center no-repeat fixed;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/63816.html
標籤：Html/Css