javascript div z-index, input tabindex属性说明
<html> <body>
<form>
用户名: <input type="text" tabindex="1" />
密码: <input type="text" tabindex="2" />
地址: <input type="text" tabindex="3" />
性别: <input type="text" tabindex="4" />
年龄: <input type="text" tabindex="5" />
</form> <div style="position: absolute;width:500;height:500;background-color:red; z-index:0"> <!-- 不要写成z-index=2 -->"
第一层
</div> <div style="position: absolute;width:600;height:400;background-color:green; z-index:-2">
第二层
</div> <div style="position: absolute;width:300;height:300;background-color:blue; z-index:5">
第三层
</div> </body>
</html>
tabindex定义了按tab键获取光标的先后顺序~!
z-index定义了层的层次关系,在层之上还是在层之下.值大的在上面。重要说明:在某些情况下设置z-index没有效果,原因是需要设置position:absolute;为绝对定位才可以。
这种情况发生的条件有三个:(div层调整zindex属性在IE中无效原因分析及解决方法)
1、父标签 position属性为relative;
2、问题标签无position属性(不包括static);
3、问题标签含有浮动(float)属性。
javascript div z-index, input tabindex属性说明的更多相关文章
- HTML TabIndex属性
TabIndex作用: tabindex:全局属性.指示其元素是否可以聚焦(获得焦点),以及它是否/在何处参与顺序键盘导航(因通常使用tab键操作,顾因此得名). 当使用tab键在网页控件中进行导航时 ...
- div/span等获取焦点问题(tabindex属性的简单理解)
1.先看问题 当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地 ...
- html中input标签的tabindex属性
当浏览者浏览网站时可以通过按TAB键在网页的链接中依次移动,这是一个相当方便实用的功能.但如果网页中链接太多,恐怕按TAB键就没什么作用了,这时不妨通过改变TAB键移动的顺序来突出重点,在某些重要页面 ...
- JavaScript常用对象的方法和属性
---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...
- 深入理解javascript函数系列第三篇——属性和方法
× 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...
- input placeholder属性IE、360浏览器兼容性问题
效果:http://hovertree.com/texiao/jquery/43/ 效果二:http://hovertree.com/texiao/jquery/43/1/ 请在IE中体验. 1.创建 ...
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- tabindex属性
1. tabindex的用法: 可以设置tab键在控件中的移动顺序. 以下元素支持tabindex属性:<a> <input> <textarea> <are ...
- tabindex属性用法
支持tabindex属性的元素:<a> <input> <textarea> <area> <select> <button> ...
随机推荐
- COM 参数有in, out ,retval
COM 参数有in, out ,retval 来源:http://blog.sina.com.cn/s/blog_472a9f0c01017uer.html In 输入参数,它的值不被返回 Ou ...
- Cocos开发中性能优化工具介绍之Xcode中Instruments工具使用
Instruments是动态分析工具,它与Xcode集成在一起,可以在Xcode中通过菜单Product→Profile启动.启动如图所示,Instruments有很多跟踪模板可以动态分析和跟踪内存. ...
- Word 2003 出现 向程序发送命令时出现问题 的 解决方案
这种原因出现的问题是word的模板出现问题. 解决方案是重新让word生成Norma.dot文档. 步骤: 1,按住视窗键+R或者开始菜单搜索文件和程序,粘贴 %appdata%\microsoft\ ...
- response.redirect和server.Transfer的差别详解
Response.Redirect和Server.Transfer都能实现页面的跳转,但两者又有很大区别. 一 地址栏里显示的地址不同 Response.Redirect会显示跳转的网页的地址,而Se ...
- Amoeba For MySQL入门:实现数据库水平切分
当系统数据量发展到一定程度后,往往需要进行数据库的垂直切分和水平切分,以实现负载均衡和性能提升,而数据切分后随之会带来多数据源整合等等问题.如果仅仅从应用程序的角度去解决这类问题,无疑会加重应用程度的 ...
- cplusplus解析
经常在头文件包含代码里面看到如下代码 #ifndef MAC_API_H #define MAC_API_H #ifdef __cplusplus extern "C"{ #end ...
- 上下问语句句柄Release地方
OCI--在QUERY中 CLI--在FETCH中 在父类中定义了public—Release和protected—Release,protected—Release在public—Release中被 ...
- L001-老男孩教育-Python13期VIP视频-19节-pbb
L001-老男孩教育-Python13期VIP视频-19节-pbb Windows上安装 Python3开发环境 下载:www.python.org >选择Downloads>All re ...
- 登堂入室——java流
——文章出自PeterYe,不得私自转载 我所知道的 java.io里面的[流],就仿佛太平洋里面的水一样,浩浩荡荡,横无际涯... -----2016/7/16--------公寓处记录------ ...
- Android Wear预览版——尝鲜
前两天Google推出了Android Wear的SDK,稍稍的瞧了一眼,发现这个预览版的功能还是比较简单的,只有一个通知转发的功能,不过就这么一个功能,带来的效果却是Very Good~~ 功能:发 ...