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. C++#pragma pack指令

    微软官方文档说#pragma pack 指令的作用是为结构.联合和类成员指定 pack 对齐.的主要作用就是改变编译器的内存对齐方式,这个指令在网络报文的处理中有着重要的作用,#pragma pack ...

  2. END - 提交当前的事务

    SYNOPSIS END [ WORK | TRANSACTION ] DESCRIPTION 描述 END END 提交当前事务. 所有当前事务做的修改都可被其它事务看到并且保证在发生崩溃的情况下的 ...

  3. java web开发中常用的协议的使用和java-web 常见的缓冲技术

    一.DNS协议 作用将域名解析为IP   类似于我们只需要知道中央一台,中央二台,而不需要知道它的频率,方便记忆. java dns 域名解析协议实现 1 域名解析,将域名可转换为ip地址InetAd ...

  4. Android studio Github 断开连接

    http://blog.csdn.net/agoodcoolman/article/details/50562301 使用软件:Android studio svn:Github 从github直接从 ...

  5. Microsoft Windows Server

    Microsoft Windows Server Microsoft Windows Microsoft Windows 是微软推出的个人版操作系统: Microsoft Windows Server ...

  6. Hibernate-03 关联映射

    学习任务 关联映射 inverse属性.cascade属性 单向的多对一.双向的一对多映射 多对多映射 关联关系 类与类之间最普遍的关系就是关联关系. 单向的关联 双向的关联 单向多对一关联 以Emp ...

  7. OpenCV2:第七章 图像处理

    一.简介 灰度图(灰阶图),把白色到黑色之间分为256阶灰度 彩色图有RGB三个分量,假设图是800*800像素,那么就有三个800*800的矩阵分别代表RGB 二值化处理设定阈值,在阈值中的像素值变 ...

  8. iPhone模拟定位（非越狱修改手机定位）

    剩下的事情就是build一下到手机,那么,就可以看到神奇的效果!   本次带来一个简单又好玩的实用功能,比如定位装逼(共享定位非分享可选那种),又或者定位打卡之类,由于改变的是设备级别的定位,本设备所 ...

  9. Django框架基础知识07-常用查询及表关系的实现

    1.常用的模型字段类型 https://docs.djangoproject.com/en/2.1/ref/models/fields/#field-types 2.字段的常用参数 官方文档:http ...

  10. [第一波模拟\day3\T3]{益智游戏}(game.cpp)

    [问题描述] 小P和小R在玩一款益智游戏.游戏在一个正权有向图上进行. 小P控制的角色要从A点走最短路到B点,小R控制的角色要从C点走最短路到D点. 一个玩家每回合可以有两种选择,移动到一个相邻节点或 ...