在定位中,如何清除已经设置好的bottom
这个东西其实很简单,将bottom设auto,便可在设置top的值,那么具体的应用是什么?目前一个是用于全屏,二是用于输入框在手机端的下半屏(被输入发遮挡问题)?
例子如下
css代码:
* { margin: 0; padding: 0; } .fixed { z-index: 9; position: fixed; left: 50%; margin-left: -320px; bottom: 0; width: 640px; padding: 30px; background: #fff; border: 1px solid #ddd; border-left:none; border-right: none; } .txt { line-height: 50px; width: 100%; text-indent: 10px; } .gb-mask { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2); }
html代码
<div style="width: 640px; margin: 0 auto;"> <div class="fixed"> <input type="text" class="txt" placeholder="输入"/> </div> </div> <div class="gb-mask"></div>
jq代码
<script> $(function(){ $('.txt').focus(function(){ $('.fixed').css({ 'bottom':'auto', 'top':'0' }) $('.gb-mask').fadeIn(); }); $('.gb-mask').click(function(){ $('.fixed').css({ 'bottom':'0', 'top':'auto' }) $('.gb-mask').fadeOut(); }); }); </script>
效果如图:
在定位中,如何清除已经设置好的bottom的更多相关文章
- 关于定位中left和right,top和bottom的权重问题
关于定位中left和right,top和bottom的权重问题 在共同类中设置了定位并且设置了left等定位,如果你引用这个类并加入其他的类中也有left和right等定位,那么你设置的right或是 ...
- 怎么在Chrome和Firefox浏览器中清除HSTS设置?
HSTS代表的是HTTPS严格传输安全协议,它是一个网络安全政策机制,能够强迫浏览器只通过安全的HTTPS连接(永远不能通过HTTP)与网站交互.这能够帮助防止协议降级攻击和cookie劫持. HST ...
- 在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件
在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件 当触发事件时候 会把当前的dom传给该方法
- 深入理解CSS定位中的偏移
× 目录 [1]定位 [2]包含块 [3]偏移属性[4]绝对定位[5]格式化 [6]auto 前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位 ...
- 用WIN7系统IIS的提示:数据库连接出错,请检查Conn.asp文件中的数据库参数设置
我用科讯的从4.0开始,去年开始很少用科讯做新站了,今天拿来做一下,结果悲剧了,数据库路径老是不对,百度一番又一番的,,最后终于给度娘解决了.分享出来给遇到同样的问题的人. 用WIN7系统IIS的注意 ...
- MD中bitmap源代码分析--设置流程
1. 同步/异步刷磁盘 Bitmap文件写磁盘分同步和异步两种: 1) 同步置位:当盘阵有写请求时,对应的bitmap文件相应bit被置位,bitmap内存页被设置了DIRTY标志.而在下发写请求给磁 ...
- 【转】深入理解CSS定位中的偏移
前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定 ...
- Swing编程中为什么对Panel设置了位置后,它的lable位置也跟这变了呢?
总结: package com.da; //这里我不明白,我对每一个Panle里的按钮设置了位置BorderLayout.SOUTH.可是为什么Lable的位置和它一样同步设置了呢? //做一个界面 ...
- css定位中的百分比
----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比 首先从css的设计意图说起,在浏览器默 ...
随机推荐
- openstack-L版安装
参照官方install document: http://docs.openstack.org/liberty/install-guide-rdo/ 实验环境:centos7.2 桥接: 192.16 ...
- 转载:hdu 动态规划题集
1.Robberies 连接 :http://acm.hdu.edu.cn/showproblem.php?pid=2955 背包;第一次做的时候把概率当做背包(放大100000倍化为整数): ...
- order by id asc得出的排序是什么原理
我们要用order by id asc得出的排序应该是,4,好了原理就这么简. sql实现方法,代码如下: : 代码如下: $sql ="Select 字段 from 表名 where id ...
- 通过Sysprep封装系统
<?xml version="1.0" encoding="utf-8"?> <unattend xmlns="urn:schema ...
- 【iBoard电子学堂开发板例程】【12个 stm32 例程发布】
_____________________________________ 深入交流QQ群: A: 204255896(1000人超级群,可加入) B: 165201798(500人超级群,满员) C ...
- Maven学习记录
一.简单介绍 Maven 是一个项目构建和管理自动化工具,通过它可以便捷的管理项目的生命周期,包括项目的jar包依赖,开发,测试,发布,打包等. 二.基本概念 2.1 Pom - 项目对象模型 全称( ...
- HDU 1003 基础dp 最大连续序列和
常常做错的一道题.. 因为总是要有一个长度的 所以一开始的s与e都是1 maxx也是a[1] 然后再求 从i=2开始 在这里注意 me永远是当前i 而ms则可能留在原地 可能直接等于i 判断条件就是当 ...
- ecshop 完美解决动态ip登录超时和购物车清空问题
ecshop 完美解决动态ip登录超时和购物车清空问题 ECSHOP模板/ecshop开发中心(www.68ecshop.com) / 2014-05-06 前一段时间,ECSHOP开发中心的一个客户 ...
- Yii源码阅读笔记(十一)
controller类的render部分,用于渲染视图和布局文件: /** * Returns all ancestor modules of this controller. * 获取当前控制器所有 ...
- 自动配置IP地址.bat
※※※※※※※※※※※※※※※※※※※※※※※※※※※※ @echo ※ ※ @echo ...