打開input輸入的時候,css中position:absolute/fixed定位的時候,定位元素上移問題解決

時間 2019-12-08

標籤打開 input 輸入時候 css position absolute fixed 定位元素上移問題解決欄目 CSS 简体版

原文原文鏈接

一、異常代碼html

<style>
  .box{
    min-height: 100vh;
    width: 100%;
    position: relative;
  }
  .position{
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
  }
</style>
<body>
  <div class="box">
　　 <input type="text"/>
    <div class="position">
      底部
    </div>
  </div>
</body>

　　這樣的代碼，咱們能夠看到底部的position會隨着 input 輸入，高度變化而上來 htm

　　這樣有可能底部會擋住元素blog

二、解決方法input

<style>
  .box{
    min-height: 100vh;
    width: 100%;
    position: relative;
  }
  .position{
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
  }
</style>
<body>
  <div class="box">
    <input type="text">
    <div style='height: 400px'></div>
    <div class="position">
      底部
    </div>
  </div>
</body>

　　在裏面添加一個元素，使得內容的高度大於輸入時候屏幕的高度it

　　這樣就解決了io