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. 1.3 jieba中文处理+安装

    第一次接触这个工具,是在研一上学期的一门课里.由于要做课程设计论文,我当时选择做中文分词处理,自然而然就接触到这个工具了. 但是呢,由于研究生研究方向与NLP无关,也就没有深入的研究过. 现在由于工作 ...

  2. docker client和daemom

    client 模式 docker命令对应的源文件是docker/docker.go, docker [options] command [arg...] 其中options参数为flag,任何时候执行 ...

  3. com组件简单应用

    1.打开VS2010,新建ATL COM 项目,步骤:“文件” -->“新建” -->“项目”,选择“Visual C++” -->“ATL 项目” ,填写“名称” FirstCOM ...

  4. python基础一 day2 数据类型

    int:        bool: 类型转换: str到int有条件,str必须是数字, "123e"是错误的 bool转换为int类型,需要int(x)  结果:  结果: 空字 ...

  5. js 根据指定个数切割数组

    Part.1 问题 写项目时,遇到需要前端做 假分页 的问题:后端会将数据全部返回,前端自己做分页 Part.2 思路 拿到后端全部返回的数据后,按照 产品需求  进行分页,如每页显示 10 条数据为 ...

  6. MySQL系列(三)--数据库结构优化

    良好的数据库逻辑设计和物理设计是数据库高性能的基础,所以对于数据库结构优化是很有必要的 数据库结构优化目的: 1.减少数据的冗余 2.尽量避免在数据插入.删除和更新异常 例如:有一张设计不得当的学生选 ...

  7. zay大爷的膜你题 D2T1 江城唱晚

    依旧是外链... 这一次网易云爆炸了....所以我决定后面的都用QQ 下面是题面 这道题是一道傻逼题 数学题,我们仔细看一看,首先有m朵花的话,我们就有m!种排列方式(也就是m的全排列), 然后我们假 ...

  8. STL源码分析与实现-stl_list容器

    1. stl_list 介绍 今天我们来总结一下stl_List, 通过之前介绍单链表的文章,其实对链表的基本操作已经十分熟悉了,那对于stl_list,无非就是链表结构不一样,至于其中的增删改查的细 ...

  9. Java性能调优概述

    目录 Java性能调优概述 性能优化有风险和弊端,性能调优必须有明确的目标,不要为了调优而调优!!!盲目调优,风险远大于收益!!! 程序性能的主要表现点 执行速度:程序的反映是否迅速,响应时间是否足够 ...

  10. spring-mvc jackson配置json为空不输出

    使用的spring-mvc版本是4.1.6,jackson版本是2.1.4 在spring-mvc配置文件中添加以下代码就行 <mvc:annotation-driven> <mvc ...