一、原因
固定定位是參考布局視口做定位的，而在移動端，存在布局視口、視覺視口、理想視口，如果適配方案使用不正確，很容易造成布局錯誤。
二、案例1，有問題版本，在喚起虛擬鍵盤的時候，布局錯亂了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>移動端使用絕對定位來模擬固定定位</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/> <style type="text/css"> *{margin: 0; padding: 0;} #global-wrapper .header{ width: 100%; height: 100px; position: fixed; left: 0; top: 0; background-color: #0000FF; } .footer{ width: 100%; height: 100px; position: fixed; left: 0; bottom: 0; background-color: yellow; } </style> </head> <body> <div id="global-wrapper"> <div class="header"></div> 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 <input type="text" name="name" id="name" /> 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 <div class="footer"></div> </div> </body> </html>
三、案例2，絕對定位版本，布局沒有錯亂，
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>移動端使用絕對定位來模擬固定定位</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/> <style type="text/css"> *{margin: 0; padding: 0;} html,body{ width: 100%; height: 100%; overflow: hidden; } #global-wrapper{ width: 100%; height: 100; overflow: auto; } #global-wrapper .header{ width: 100%; height: 100px; position: absolute; /*相對body進行定位，上下移動的時候只是移動global-wrapper，而body沒有動*/ left: 0; top: 0; background-color: #0000FF; } .footer{ width: 100%; height: 100px; position: absolute;/*相對body進行定位*/ left: 0; bottom: 0; background-color: yellow; } </style> </head> <body> <div id="global-wrapper"> <div class="header"></div> 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 <input type="text" name="name" id="name" /> 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 在做移動端業務開發時，<br/>經常碰到fixed元素和輸入框<br/>同時存在的情況。在手機軟鍵盤喚起的情<br/>況下，會造成原本<br/>fixed定位的元素跟隨軟鍵盤而<br/>上浮，對整體布局造成沖擊<br/>。來看這<br/>樣一個栗子直觀的感受<br/>一下這個bug。 <div class="footer"></div> </div> </body> </html>
效果是沒有錯亂的，使用絕對定位，頭部和尾部都是相對body進行定位，上下移動的時候只是移動global-wrapper，而body沒有動，布局沒有錯亂