可經過position屬性還設置元素的定位。瀏覽器
可選值:static 默認值 沒開啓url
relative 開啓相對定位spa
absolute 開啓絕對定位code
fixed 開啓固定定位(絕對定位的一種)視頻
開啓定位後可經過left、right、top、bottom四個屬性來設置元素偏移量。圖片
left:元素相對於其定位位置的左側偏移量。(距離左邊多少 ——— 向右移)文檔
一般只需選擇其中兩個就可對元素進行定位。(水平垂直方向各一個)it
一、相對定位指相對於元素在文檔流中原來的位置進行定位。io
二、開啓相對定位的元素不會脫離文檔流。故相對定位不會改變元素性質,語法
即塊仍是塊,內聯仍是內聯。
三、相對定位會使元素提高一個層級。(定位元素能夠蓋住文檔流元素)
四、開啓相對定位而不設置偏移量時元素不會發生任何變化。
.box1{
position:relative;
left:100px;
}
一、絕對定位是相對於離他最近的開啓了定位的祖先元素進行定位的。
若全部的祖先元素都沒有開啓定位,則相對於瀏覽器的窗口。
故通常開啓了子元素的絕對定位都會同時開啓父元素的相對定位。
二、開啓絕對定位的元素會脫離文檔流。故絕對定位會改變元素性質,
內聯會變成塊,塊的寬高默認都被內容撐開。
三、絕對定位也會使元素提高一個層級。
四、開啓絕對定位而不設置偏移量時元素位置不變化。
與絕對定位不一樣的地方:
一、固定定位永遠相對於瀏覽器窗口進行定位。
二、固定定位會固定在瀏覽器窗口的某個位置,不會隨着滾動條而滾動。
(廣告、視頻、回到頂部等)
三、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;