在定位中,如何清除已经设置好的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的设计意图说起,在浏览器默 ...
随机推荐
- asp.net 微信企业号办公系统-流程设计--流程步骤设置-事件设置
事件设置是设置当前步骤在提交前后或退回前后要执行的一些操作(该事件为服务器事件). 事件格式为:dll名称.命名空间名称.类名.方法名,这里不需要写括号和参数,处理时会自动带上当前流程实例的相关参数. ...
- android开发事件监听
第一种:匿名内部类作为事件监听器类 大部分时候,事件处理器都没有什么利用价值(可利用代码通常都被抽象成了业务逻辑方法),因此大部分事件监听器只是临时使用一次,所以使用匿名内部类形式的事件监听器更合适, ...
- Network | TCP congestion control
拥塞控制算法:1. 加性增.乘性减:2. 慢启动:3. 对超时事件作出反应: 整体过程如下: 慢启动->到达阈值->加性增(窗口+1个MSS), 这个阶段叫拥塞避免(CA)->3个冗 ...
- 分布式架构高可用架构篇_02_activemq高可用集群(zookeeper+leveldb)安装、配置、高可用测试
参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...
- Responsive布局技巧
在Responsive布局中,可以毫无保留的丢弃: 第一, 尽量少用无关紧要的div: 第二,不要使用内联元素(inline): 第三,尽量少用JS或flash: 第四,丢弃没用的绝对定位和浮动样式: ...
- HRBUST 1326 循环找父节点神术
题意 给出一个图 给出a点到每个点的路径 最后经过的除这个点本身以外的点 现在把a点改为b点 让求出按上面那种方式 把除b之外的点对应的点列出 ...算了我描述题意得能力好差...这个锅还是给出题的吧 ...
- [办公自动化]利用Acrobat完成问卷调查或者考试卷
整体思路:(软件环境Acrobat) 1.制作问卷. 采用word制作,制作基础页面,然后倒入.自己亲测时,发现一般的文字域是可以的,但是单选按钮就不能导入. 如果是考试卷,可以利用word制作基础页 ...
- [ZZ] 基于DirectX shader的Per-pixel lighting实现
这个特效需要用到DX11 UAV吗? http://blog.tianya.cn/blogger/post_show.asp?BlogID=510979&PostID=5665974 Intr ...
- ICON文件保存
这两天想做一下windows系统下图标的修改,让程序有更新的时候能够更新图标的外观,达到提醒的作用,360,QQ经常采用这种方式进行更新的提示,也有采用弹框的方式来提示,用新版QVOD的同事可能见到过 ...
- Bootstrap页面布局11 - BS表单
表单之 文本框 text <input type='text' value='' placeholder='输入您的用户名' class='input-mini' /> ①几个类控制文本框 ...