在做移動端業務開發時，經常碰到fixed元素和輸入框同時存在的情況。在手機軟鍵盤喚起的情況下，會造成原本fixed定位的元素跟隨軟鍵盤而上浮，對整體布局造成沖擊。來看這樣一個栗子直觀的感受一下這個bug。
問題描述：
開發一個創業板轉簽頁面，預期效果圖是這樣的。
紅色矩形區域為使用fixed布局的內容，其css代碼為{width:100%;position:fixed;bottom:0;left:0}，這看起來並沒有什么問題，但在手機軟鍵盤喚起進行輸入的時候，紅色矩形區域跟隨軟鍵盤而浮動起來，這時候是這樣的：
底部的規則欄跟着鍵盤上浮，雖說還是保持了在屏幕底部，但嚴重影響了用戶體驗，也不方便進行輸入。經查閱資料，發現isScroll.js可以較好的解決fixed定位引起的問題，但是單獨為了一個頁面而引入第三方庫顯然不利於提升頁面性能。盡可能不依賴第三方庫來簡化實現方式。
解決思路：
①不使用fixed布局，則必然要用到margin等來調整位置，但是這會引起和其他兄弟頁面子頁面的風格不一致，對此站點內每個頁面進行改動勢必增加了很大的工作量。
②使用z-index來解決這個問題，設置底部的z-index值小於上部分的z-index值，這樣即使上浮了也會被上部分遮住，但同樣會引起問題：底部區域雖然視覺上能看到但會被一直遮蓋，無法單擊進行交互操作，就這個例子而言，看不了業務規則，也下載不了APP。
③對input輸入框進行監控，一旦獲取焦點就取消掉底部區域的fixed屬性，失去焦點就恢復fixed屬性。但是有一個關鍵問題是：文本框獲得焦點未必會彈出鍵盤！！！我們認為會出現或者消失鍵盤的時候都可能不工作！！！
解決方案：經過反復試驗，結合思路②和思路③，提出了輸入框焦點監控結合設置z-index值方案完美的解決了這個bug。
來看主要步驟，設置底部區域為fixed布局不變，設置底部矩形區域的z-index值與上部分的z-index值相等。
當輸入框獲得焦點（不管鍵盤有沒有彈出）時，設置底部矩形區域的z-index值小於上部分的z-index值；
當輸入框失去焦點時，恢復這兩部分的z-index值一致以確保底部區域能單擊到。
這樣設置不論鍵盤有沒有彈出都不會影響頁面整體布局和用戶體驗，當用戶在頁面內有單擊其他超鏈接行為時已失去焦點，此時能確保所有區域可以被單擊進行交互。
//輸入框獲得焦點事件 $("#input_id1,#input_id2").focus(function () { //todo }); //輸入框失去焦點事件 $("#input_id1,#input_id2").blur(function () { //todo });
解決bug后的效果圖
