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. 如何安装Virtual Box的VBox Guest Additions扩展程序

    Virtual Box的默认安装是不包含Guest Addition这个扩展的,在实际使用过程中带来种种不便,比如只能通过小窗口访问虚拟机的操作系统,通过默认的右Ctrl切换鼠标,不能和宿主操作系统共 ...

  2. Node.js Addons翻译(C/C++扩展)

    PS:请先升级Node 6.2.1,Node 升级命令 npm install -g n;n stable.NOde.js扩展是一个通过C/C++编写的动态链接库,并通过Node.js的函数requi ...

  3. 植物大战僵尸游戏的开发(python)

    装备东西: 搭建好python环境, 四张图片,(背景图片,炮弹图片,僵尸图片,豌豆图片),就ok了  没有安装pygame的需要进行安装  pip install pygame 参考视频 # 植物大 ...

  4. 中位数II

    该题目与思路分析来自九章算法的文章,仅仅是自己做个笔记! 题目:数字是不断进入数组的,在每次添加一个新的数进入数组的同时返回当前新数组的中位数. 解答: 这道题是用堆解决的问题.用两个堆,max he ...

  5. [LOJ] 分块九题 1

    https://loj.ac/problem/6277 区间修改,单点查询. //Stay foolish,stay hungry,stay young,stay simple #include< ...

  6. nginx 获取真实ip

    使用阿里云SLB,无法获取真实ip问题 官方给出的是如下用法,需要安装模块,大体上是没有错的,但是比较模糊,实际操作中可能会踩坑,所以参考学习即可,不必照搬.(那个http_realip_module ...

  7. cobbler 无人值守-安装

    环境准备 准备两台主机,如centos6和centos7 centos7当作server服务器 关闭selinux 关闭防火墙 安装 cobbler包光盘里是没有的,要配置epel源,这里就说怎么配置 ...

  8. tomcat 403错误和ls: cannot open directory '.': Permission denied

    在centos7 linux系统上使用docker进行tomcat部署项目测试的时候发现第一个错误:浏览器返回403 错误,显然是一个权限问题,禁止访问.下面是我一步一步的操作: 1 使用的docke ...

  9. Python3--中括号"[]"与冒号":"在列表中的作用

    先来定义两个列表: liststr = ["helloworld","hahahh","123456"] listnum = [1,2,3, ...

  10. 剑指Offer（书）：用两个栈实现队列

    题目:用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 分析:入栈时只入栈1,出栈为栈2:若栈2不为空,直接出栈:否则,将栈1中的值依次入栈2,之后栈2出栈 Sta ...