Съезжают элементы при введении текста в инпут

Проблема такая: при нажатии на инпут, открывается клавиатура. Казалось бы, все хорошо, так и надо. Но. Вместе с этим элементы, которые клавиатура как бы должна перекрывать, на деле съезжают вверх, то есть теперь они над клавиатурой

Вот так вот должно быть.	А вот так не должно.

Как это фиксить?

SASS (codepen):

$htmlWidth: 100%

*
  box-sizing: border-box
  padding: 0
  margin: 0 auto
  outline: none
  font-family: Arial, Helvetica, sans-serif

html, body
  width: $htmlWidth
  height: 100%

#app
  width: 100%
  height: 100%
  background: #14033D

.block
  width: 300px
  height: auto
  position: absolute
  top: 45%
  left: 50%
  transform: translate(-50%, 0%)
  display: flex
  flex-direction: row
  flex-wrap: wrap
  align-items: start
  justify-content: space-evenly
  color: #fff
  h3, div
    margin-left: 0
    margin-top: 15px
  img
    width: 25px
    height: 18px
    padding-right: 5px
  div
    display: flex
    flex-direction: row
    align-items: end
    justify-content: space-between
    background-color: #28244e
    padding: 20px 10px 20px 10px
    border-radius: 20px
    min-width: 110px
    margin: 15px

.app-city
  color: #fff
  position: absolute
  top: 120px
  left: 50px
  font-size: 18px
  border-radius: 25px
  font-weight: 400

.app-city-block
  img
    width: 25px
    height: 25px
    position: absolute
    top: 115px
    left: 20px
    cursor: pointer
  input
    position: absolute
    top: 120px
    left: 25px
    opacity: 0

.app-temp
  color: #fff
  position: absolute
  top: 150px
  left: 65px
  font-size: 44px
  border-radius: 25px
  font-weight: 400

.app-cloud
  color: #fff
  position: absolute
  top: 210px
  left: 40px
  font-size: 18px
  border-radius: 25px
  font-weight: 400
  padding: 10px 15px 10px 15px
  background-color: #28244e

.block-input
  border: 1px solid #fff
  background: transparent
  width: 300px
  height: 40px
  position: absolute
  top: 40px
  left: 50%
  transform: translate(-50%, 0%)
  border-radius: 20px
  color: #fff
  padding-left: 15px

.text
  font-size: 14px

.app-bottom-panel
  width: 100%
  height: 50px
  background: transparent
  border-top: 1px solid #696969
  position: fixed
  bottom: 0
  left: 0
  display: flex
  flex-direction: row
  flex-wrap: nowrap
  align-items: center
  justify-content: space-evenly