<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属性说明的更多相关文章

  1. HTML TabIndex属性

    TabIndex作用: tabindex:全局属性.指示其元素是否可以聚焦(获得焦点),以及它是否/在何处参与顺序键盘导航(因通常使用tab键操作,顾因此得名). 当使用tab键在网页控件中进行导航时 ...

  2. div/span等获取焦点问题(tabindex属性的简单理解)

    1.先看问题 当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地 ...

  3. html中input标签的tabindex属性

    当浏览者浏览网站时可以通过按TAB键在网页的链接中依次移动,这是一个相当方便实用的功能.但如果网页中链接太多,恐怕按TAB键就没什么作用了,这时不妨通过改变TAB键移动的顺序来突出重点,在某些重要页面 ...

  4. JavaScript常用对象的方法和属性

    ---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...

  5. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  6. input placeholder属性IE、360浏览器兼容性问题

    效果:http://hovertree.com/texiao/jquery/43/ 效果二:http://hovertree.com/texiao/jquery/43/1/ 请在IE中体验. 1.创建 ...

  7. 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

    <完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...

  8. tabindex属性

    1. tabindex的用法: 可以设置tab键在控件中的移动顺序. 以下元素支持tabindex属性:<a> <input> <textarea> <are ...

  9. tabindex属性用法

    支持tabindex属性的元素:<a> <input> <textarea> <area> <select> <button> ...

随机推荐

  1. （二）Qt界面设计之菜单栏

    1.添加菜单项 直接输入菜单项名称,然后回车即可. 2.为菜单项设置图标 在动作编辑器上,右键选择编辑,然后添加图标 如果想在图标栏添加该菜单的快捷图标,直接将该动作项拖放只图标栏即可. 3.事件响应 ...

  2. iPhone左下角app图标

    iOS8之后,苹果增加了一个新功能.会根据位置,自动在锁屏界面左下角出现相关应用.比如用户在苹果零售店时候,右下角会出现Apple Store官方应用的快捷方式,按住左下角的图标向上滑动,即可快速解锁 ...

  3. C#中 多线程执行含有返回值的函数

    C# 中,传统的多线程并不支持多线程执行含有返回结果的函数.虽然可以通过制作外壳类来使得返回结果得以保留,但如果一定时间内函数未执行完,简单的外壳类可能就无法满足需求了. class netHelpe ...

  4. JavaScript之数组对象

    Array类型是ECMAScript中最常用的类型了. 一.声明方式 1.使用Array构造函数 var arr1 = new Array(); 如果预先知道要保存数组的数量, 也可以给构造函数传递该 ...

  5. react服务端/客户端，同构代码心得

    FKP-REST是一套全栈javascript框架   react服务端/客户端,同构代码心得 作者:webkixi react服务端/客户端,同构代码心得 服务端,客户端同构一套代码,大前端的梦想, ...

  6. Libcurl笔记二

    一: multi与easy接口的不同处The multi interface offers several abilities that the easy interface doesn't. The ...

  7. WIN32一些文件及窗口操作

    0,获取指定的系统路径: #include <shlobj.h>     #pragma comment(lib, "shell32.lib") TCHAR szPat ...

  8. Gitlab 与 Git Windows 客户端一起使用的入门流程

    我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3824934.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...

  9. POJ 2528 Mayor’s posters

    Mayor's posters Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 37982   Accepted: 11030 ...

  10. C/C++输入输出总结

    *string类:  1.cin>>string时,遇到'\n'或者空格即停止,并且'\n'或空格仍留在输入里,即只读了一个单词或什么都没读,但string类自己处理好了空字符什么的.下一 ...