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

热度：60 发布时间：2023-12-15 21:38:06.0

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>

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

　　这样就解决了