打开input输入的时候,css中position:absolute/fixed定位的时候,定位元素上移问题解决
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定位的时候,定位元素上移问题解决的更多相关文章
- (转)实例详解CSS中position的fixed属性使用
关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- CSS中Position 的用法详解。
记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS中"position:relative"属性与文档流的关系
前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- 深入理解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 ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
随机推荐
- mysql 表锁死的问题
select * from information_schema.innodb_trx; kill 34863;kill 34856;kill 34860;kill 34859;kill 34845; ...
- feign 负载均衡熔断器
feign:和zuul配合进行负载均衡. 注解的含义: @EnableDiscoveryClient 声明它是一个资源服务端,即可以通过某些接口调用一些资源: @EnableFeignClients ...
- OpenCV2:第四章 导出图像
一.简介 一般我们用OpenCV来处理图像数据的时候,OpenCV已经把图像数据包装成一个图像数据类,我们只需要对类成员的像素值进行修改就行了. 但是在Windows开发的WinSDK/MFC中,对图 ...
- Java中的反射--Reflect
在张孝祥老师的Java讲解中,学习到了Java反射的一部分知识,觉得有必要好好学习一下哈. 一.反射的理解 经典总结:反射就是把Java类中的各种成分映射成为相应的Java类 例如:一个Java类中用 ...
- github下拉刷新与上拉加载地址
https://github.com/chrisbanes/Android-PullToRefresh
- (14) openssl x509(签署和自签署)
主要用于输出证书信息,也能够签署证书请求文件.自签署.转换证书格式等. openssl x509工具不会使用openssl配置文件中的设定,而是完全需要自行设定或者使用该伪命令的默认值,它就像是一个完 ...
- 《算法导论》— Chapter 6 堆排序
序 本文主要介绍堆排序算法(HeapSort),堆排序像合并排序而不像插入排序,堆排序的运行时间为O(nlgn):像插入排序而不像合并排序,它是一种原地(in place)排序算法.在任何时候,数组中 ...
- 杭电 4707 pet（并查集求元素大于k的集合）
Description One day, Lin Ji wake up in the morning and found that his pethamster escaped. He searche ...
- 如何将表的行数赋值给变量（MySQL）
delimiter $$ drop procedure if exists test_at $$ create definer=root@localhost procedure test_at() b ...
- 大数据学习——hive基本操作
1 建表 create table student(id int,name string ,age int) row format delimitedfields terminated by ','; ...