首頁  >  文章  >  web前端  >  css中position定位的四種方法總結

css中position定位的四種方法總結

高洛峰
高洛峰原創
2017-03-13 14:18:092621瀏覽

這篇文章敘述css中position定位的四種方法總結

1. positon: static; 靜態定位(預設的 )  

  所有標準文件流程中的元素都是靜態定位

##2. positon:relative;  相對定位

  

不脫離標準文檔流,「老家留坑,形影分離」

#  特徵:如果設定了相對定位並且設定了

topleft

rightbottom

屬性

,那麼將來盒子會用盒子原來所在的位置進行偏移

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

  (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;   固定定位#########  脫離標準文檔流#######  固定定位的用途:頁面中的某些小廣告,需要固定在頁面中的一個位置不變###### ##########總結:將來在寫頁面的時候,用的最多的不是絕對定位也不是相對定位,而是絕對定位與相對定位一起使用############   規範:子絕父相(子元素使用絕對定位,父元素使用相對定位)#######

以上是css中position定位的四種方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn