Android soft keyboard overlap with input div on browser 【Android虛擬鍵盤與輸入框重疊】

給個英文標題，因為我知道絕大部分人搜資料都用英文搜。

問題：

在Android裝置瀏覽器上開啟自己的頁面，當點選頁面底部的輸入框時，虛擬鍵盤彈出，但頁面並未自動滾動以使輸入框可見，造成鍵盤遮擋了大部分頁面，包括輸入框，使用者看不到輸入的內容。看似小問題，但使用者體驗奇差。

未選中時：

點選email輸入框：虛擬鍵盤擋住了輸入框，整個頁面沒有自動滾動，你看不到你要的輸入框，除非你手動滑動頁面。

分析：

開門見山吧。這其實是CSS的問題，而且絕對跟你的input div沒有直接關係，這個問題誤導性極大，一度認為是js scroll問題，浪費我大半天時間。

我的頁面最上有一個 position:fixed 的title。而頁面上那個Yes button屬性是position:absolute，看似八杆子打不著的東西，但就是它們的CSS屬性導致了奇怪的行為。

解決方案：

在stackoverflow上，有人針對類似問題，總結了一個rule: 頁面上凡是同時存在position:fixed 與 position:absolute 的元素時，必須保證position:fixed的z-index比任何一個position:absolute 元素的值都大。你可以把position:fixed的z座標設定成一個較大正數，大過所有absolute元素;或者每一個position:absolute設定成一個較小數或負數，小過所有fixed元素。

我最終是在fixed元素上設定了z-index:100，其他absolute元素均未設定z座標。

我也是試過一堆解決方法後，最終用這個方法見效的。當點選email輸入框時，鍵盤遮擋了它，同時頁面立即自動滾動，以讓當前輸入框在可視範圍內。

疑點：

1.我測試了下，我的fixed title沒有設定z座標， 而把email input div之上的最近一個absolute元素的z座標設定成負數，也可以見效。因為我頁面上還有很多其他的absolute元素，所以可以肯定，並不是要所有的absolute元素的z座標小於fixed元素。當然最安全的還是把fixed元素z座標設定較大，這樣永遠不會錯。

2.頁面上那個tell us more的上面也有absolute元素（不相臨），但頁面行為正常，在被遮擋後，頁面會自動滾動，而email input就不行。猜想可能是緊臨absolute元素時才會出這種問題，時間有限，沒做太多測試。