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

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

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