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

定位

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

  ​可選值:static 默認值 沒開啓url

​       relative 開啓相對定位spa

​       absolute 開啓絕對定位code

​       fixed 開啓固定定位(絕對定位的一種)視頻

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

  left:元素相對於其定位位置的左側偏移量。(距離左邊多少 ——— 向右移)文檔

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

 

relative

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

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

     即塊仍是塊,內聯仍是內聯。

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

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

  .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;

相關文章
相關標籤/搜索