这个东西其实很简单,将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的更多相关文章

  1. 关于定位中left和right,top和bottom的权重问题

    关于定位中left和right,top和bottom的权重问题 在共同类中设置了定位并且设置了left等定位,如果你引用这个类并加入其他的类中也有left和right等定位,那么你设置的right或是 ...

  2. 怎么在Chrome和Firefox浏览器中清除HSTS设置?

    HSTS代表的是HTTPS严格传输安全协议,它是一个网络安全政策机制,能够强迫浏览器只通过安全的HTTPS连接(永远不能通过HTTP)与网站交互.这能够帮助防止协议降级攻击和cookie劫持. HST ...

  3. 在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件

    在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件  当触发事件时候 会把当前的dom传给该方法

  4. 深入理解CSS定位中的偏移

    × 目录 [1]定位 [2]包含块 [3]偏移属性[4]绝对定位[5]格式化 [6]auto 前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位 ...

  5. 用WIN7系统IIS的提示:数据库连接出错,请检查Conn.asp文件中的数据库参数设置

    我用科讯的从4.0开始,去年开始很少用科讯做新站了,今天拿来做一下,结果悲剧了,数据库路径老是不对,百度一番又一番的,,最后终于给度娘解决了.分享出来给遇到同样的问题的人. 用WIN7系统IIS的注意 ...

  6. MD中bitmap源代码分析--设置流程

    1. 同步/异步刷磁盘 Bitmap文件写磁盘分同步和异步两种: 1) 同步置位:当盘阵有写请求时,对应的bitmap文件相应bit被置位,bitmap内存页被设置了DIRTY标志.而在下发写请求给磁 ...

  7. 【转】深入理解CSS定位中的偏移

    前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定 ...

  8. Swing编程中为什么对Panel设置了位置后,它的lable位置也跟这变了呢?

    总结: package com.da; //这里我不明白,我对每一个Panle里的按钮设置了位置BorderLayout.SOUTH.可是为什么Lable的位置和它一样同步设置了呢? //做一个界面 ...

  9. css定位中的百分比

    ----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比 首先从css的设计意图说起,在浏览器默 ...

随机推荐

  1. SSH整合配置二级缓存

    一.了解 Hibernate的session提供了一级缓存,每个session,对同一个id进行两次load,不会发送两条sql给数据库,但session关闭时,一级缓存失效. 二级缓存是Sessio ...

  2. 30个非常流行的提示信息插件(jQuery Tooltip Plugin)

    在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...

  3. windows batch语法

    windows BATCH基本知识扩展名是bat(在nt/2000/xp/2003下也可以是cmd)的文件就是批处理文件. ==== 注 =============================== ...

  4. 如何在64位windows7上同时使用32位和64位的Eclipse

    我用的是64位的windows7旗舰版,jdk1.7 64位机器上可以同时运行32位和64位的Eclipse,但是电脑中必须有相应的jdk.Eclipse虽然不需要安装,但是在启动时会检查系统中固定文 ...

  5. [转].net中的认证(authentication)与授权(authorization)

    本文转自:http://www.cnblogs.com/yjmyzz/archive/2010/08/29/1812038.html 注:这篇文章主要给新手看的,老手们可能会觉得没啥营养,就请绕过吧. ...

  6. JQuery的定义

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera ...

  7. Scrum会议1(Beta版本)

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  8. 学习SSH框架

    1.SSH框架的认知 在做相关的java的网页的开发制作时,良好的层次分解是十分有比要的,所以我们在云涌第三方的框架之下来简化还有名了我们相关的网站的开发. SSH框架实则为Struct + spri ...

  9. mysql 事务是专门用来管理insert,update,delete语句的,和select语句一点不相干

    1.mysql 事务是专门用来管理insert,update,delete语句的,和select语句一点不相干 2.一般来说,事务是必须满足4个条件(ACID): Atomicity(原子性).Con ...

  10. maven编译项目理解

    如何运行这个Web项目? 右键项目名称,在弹出的选项中选择 Run As => Maven install,然后 Eclise 会下载并安装相关依赖包.在等待一段时间后,构建成功的结果如下: