JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-6-20 14:58:56

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>

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

　　这样就解决了

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

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