打开input输入的时候,css中position:absolute/fixed定位的时候,定位元素上移问题解决...

75 阅读 0 评论 50 点赞

我是靠谱客的博主粗心蜡烛，最近开发中收集的这篇文章主要介绍打开input输入的时候,css中position:absolute/fixed定位的时候,定位元素上移问题解决...，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、异常代码

<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 输入，高度变化而上来

　　这样有可能底部会挡住元素

2、解决方法

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

　　在里面添加一个元素，使得内容的高度大于输入时候屏幕的高度

　　这样就解决了

转载于:https://www.cnblogs.com/jiebba/p/9837823.html