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>

　　

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

　　这样就解决了

　　　

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

  1. (转)实例详解CSS中position的fixed属性使用

    关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...

  2. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  3. CSS中Position 的用法详解。

    记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...

  4. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  7. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  8. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  9. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

随机推荐

  1. iOS 如何使用TabbarController

    xcode中给我内置很多app模版,不过很多时候我们需要更加灵活的初始化项目.下面我就简单介绍一下,如何从0开始制作一个tabbar app. 创建个项目,由于我们从头开始写程序,因此理论上对模版没有 ...

  2. 基于Zabbix API文档二次开发与java接口封装

    (继续贴一篇之前工作期间写的经验案例) 一.           案例背景 我负责开发过一个平台的监控报警模块,基于zabbix实现,需要对zabbix进行二次开发. Zabbix官方提供了Rest ...

  3. 聊天室（C++客户端+Pyhton服务器）3.群功能添加

    创建群 数据库 group_table(user, name) grpuser_table(grpname,user) 按下添加群按钮 // 创建群组void CUserDialog::OnBnCli ...

  4. T1订正记-AC自动机-从树到图

    AC自动机已经足够棒了. 但是,好像有时还是要TLE的. 一般的AC自动还是比较好,如果在某些情况下还是会被卡掉,像是这个水题 考试的感觉 我看到这个题后,我清清楚楚的知道,这是个AC自动机+栈. 经 ...

  5. 解决for循环下变量显示一致的问题

    for(var i=0;i<10;i++){ setTimeOut(function(){ console.log("i:",i); },100) } 上面显示的打印出来结果 ...

  6. Opencascade 选择器算法

    算法的阶段 该算法包括预处理和三个主要阶段. 使用深度优先搜索逐层遍历所有对象 . 预处理 计算平截头体及其主要特征的计算. 第一阶段 - 遍历第一级BVH树 在成功构建选择平截头体之后,算法开始遍历 ...

  7. delphi并行压缩

    real case test MM parallel 4x scalable (i7 6700)(on the newer processors will be linear) I did a sma ...

  8. CentOS 7的docker安装初始化

    1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 2: 添加软件源信息 添加阿里源这样下载 ...

  9. 读书笔记之《编程小白的第1本Python入门书》

    本书电子版下载地址:百度网盘 写在前面:你需要这本书的原因 有没有那一个瞬间,让你想要放弃学习编程? 在我决心开始学编程的时候,我为自己制定了一个每天编程1小时的计划,那时候工作很忙,我只能等到晚上9 ...

  10. JavaIO基础学习笔记

    JavaIO JavaIO即Java的输入输出系统.比如我们的程序要读取一个文本文件.一张图片或者要获取控制台输入的内容,就要用到输入流:又或者程序要将生成的一段字符窜以文件的形式保存到系统中就要用到 ...