打开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.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
随机推荐
- Hibernate Lazy属性与懒加载 整理
lazy概念:要用到的时候,再去加载,对于关联的集合来说,只有当访问到的时候,才去加载它所关联的集合,比如一个user对应很多权限,只有当user.getRights()的时候,才发出select r ...
- swift 泛型的类型约束
总结: 1.类型约束只能添加到泛型参量上面 2.关联类型是泛型参量: 3.关联类型可以通过 协议.关联类型名称的形式引用: func allItemsMatch<C1: Container, C ...
- python 网络编程篇
基础模拟通话网络程序: #客户端 import socket client = socket.socket() client.connect(('localhost',6969)) client.se ...
- QT_8_Qt中的事件处理_定时器事件_定时器类_事件分发器_事件过滤器_绘图事件_高级绘图事件_绘图设备_QFile 文件读写_QFileInfo文件信息
Qt中的事件处理 1.1. 捕获QLabel中是鼠标事件 1.2. enterevent 鼠标进入 1.3. leaveevent 鼠标离开 1.4. 鼠标按下MyLabel::mousePressE ...
- node程序的部署神器pm2的基本使用
pm2是从nodejs衍生出来的服务器进程管理工具,可以做到开机就启动nodejs.当然了,也可以用nohup来做这件事情的. 前言 众所周知,Node.js运行在Chrome的JavaScript运 ...
- 无法读取配置节"system.web.extensions",因为它缺少节声明
设置 .Net Framework版本 v2.0.50727 要设置成 v4.0.30319
- 在ios中使用FMDB
SQLite (http://www.sqlite.org/docs.html) 是一个轻量级的关系数据库.iOS SDK很早就支持了SQLite,在使用时,只需要加入 libsqlite3.dyli ...
- luogu P1042 乒乓球
题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中11分制改革引起了很大的争议,有一部分球员因为无法适应新规则只能选择退役.华华就是其中一位,他退役 ...
- MySQL安装示例数据库
MySQL安装示例数据库 本文档演示如何下载及安装MySQL示例数据库sakila及employees数据库 1. 安装sakila数据库 1.1 下载sakila数据库 wget http://do ...
- POJ 2631 Roads in the North (树的直径)
题意: 给定一棵树, 求树的直径. 分析: 两种方法: 1.两次bfs, 第一次求出最远的点, 第二次求该点的最远距离就是直径. 2.同hdu2196的第一次dfs, 求出每个节点到子树的最长距离和次 ...