您的位置：首页 > Web前端 > CSS

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

2018-10-23 17:12 1016 查看

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>

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

　　这样就解决了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航