個人總結css中的四種position定位


1. positon:static; 靜態定位(默認的 )  

  所有標准文檔流中的元素都是靜態定位

2. positon:relative;  相對定位

  不脫離標准文檔流,“老家留坑,形影分離”

  特點:如果設置了相對定位並且設置了top、left、right、bottom屬性,那么將來盒子會以盒子原來所在的位置進行偏移

  相對定位的用途:一般不用於做“壓蓋效果”,就兩個作用:

  (1)微調元素

  (2)絕對定位的參考,子絕父相

  可以用left、right來描述盒子右、左的偏移;可以用top、bottom來描述盒子下、上的偏移

position:relative;
top:10px;
left:10px;   //相對於原來位置向右下移10px
position:relative;
top:-10px;
left:-10px;   //相對於原來位置向左上移10px

3. position:absolute;  絕對定位

  脫離標准文檔流 

  特點:(1)如果這個元素沒有父元素,那么將來top、left、right、bottom是相對於瀏覽器窗口來定位的

     (2)如果絕對定位的元素有父元素,但父元素沒有相對定位,那么這個時候top、left、right、bottom還是相對於瀏覽窗口來定位的

     (3)如果絕對定位的元素有父元素,而且父元素有定位(非static),那么這個絕對定位的元素偏移是以自己的父元素為基礎

     (4)絕對定位之后的元素在頁面上不會占據位置

4. position:fixed;   固定定位

  脫離標准文檔流

  固定定位的用途:頁面中的某些小廣告,需要固定在頁面中的一個位置不變

 

總結:將來在寫頁面的時候,用的最多的不是絕對定位也不是相對定位,而是絕對定位與相對定位一起使用

   規范:子絕父相(子元素使用絕對定位,父元素使用相對定位)

  

  

 


免責聲明!

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



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