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


定位

可通過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;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM