打开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