今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应。经过我的反复检查,发现只要给所有的div在深度上排个顺序就可以了。但是,有点投机取巧的感觉,所以想透彻的了解z-index这个属性。

  CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识。它就类似与photoshop里面图层的排列,越靠上的图层就在最前面,离我们的眼睛更近。(IE6有hack,以后再讨论)

图:z-index的示意图

1.如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点。

  我刚开始,所有的div都是没有设置position的,所以是可以获取点击事件的,但是调整以后发现无法监听鼠标点击了。

2. z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效。

总之:记住z-index的意义,以及必须在position的条件下使用。

z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.的更多相关文章

  1. 【CSS学习】--- position属性

    一.前言 1.HTML中的三种布局方式: 标准流(普通流):网页中默认的布局方式,即顺序布局 浮动:float 定位:position 2.position属性的作用方式: 给position属性设置 ...

  2. Position属性四个值:static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  3. position属性absolute与relative 详解

    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...

  4. 知识点摸清 - - position属性值之relative与absolute

    两者共同特点是: 改变文档流 激活元素left.top.right.bottom.z-index属性 让元素”浮起来“,z-index>0 不同的是: 1.position:relative 会 ...

  5. CSS position 属性

    position: relative | absolute | static | fixed 参考网站:http://blog.csdn.net/dyllove98/article/details/8 ...

  6. 细说css中的position属性

    有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...

  7. css定位position属性深究

    1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...

  8. Index on DB2 for z/OS: DB2 for z/OS 的索引

    可以创建在任何表上的索引: Unique Index:An index that ensures that the value in a particular column or set of col ...

  9. 深入理解Oracle索引(1):INDEX SKIP SCAN 和 INDEX RANGE SCAN

    ㈠ Index SKIP SCAN                当表有一个复合索引,而在查询中有除了索引中第一列的其他列作为条件,并且优化器模式为CBO,这时候查询计划就有可能使用到SS       ...

随机推荐

  1. 【转】BLE 学习记录

    原文网址:http://m.blog.csdn.net/blog/chiooo/43985401 BLE 学习记录 ANROID BLE 开发,基于 bluetoothlegatt 分析 mBluet ...

  2. iconv gbk字符转utf8字符

    直接上代码 bool gbk2utf8(const char* src, char* dest, size_t inlen) { const char *inbuf = src; size_t out ...

  3. 第一个ios程序

    1.ios的理解: Operating System,简称OS,操作系统,ios是苹果操作系统. 2.Xcode开发环境: 苹果公司开发的编程软件,是开发人员建立OS X 和 iOS 应用程序的最快捷 ...

  4. selenium webdriver启动Chrome浏览器后无法输入网址的解决办法

    通过selenium webdriver启动Chrome浏览器,脚本如下: from selenium import webdriver browser = webdriver.Chrome() br ...

  5. SetupFactory +添加frm2.0工具

    网盘链接: http://pan.baidu.com/s/1c1DFRJM 带单独的添加frm2.0工具 原setupfactory文件下载地址:http://www.pc0359.cn/downin ...

  6. today's learning of english 1

    1.curriculum    必修课 主修课 2.sought       seek的过去式 3.blessed with a wonderful marriage   有个幸福美满的婚姻 4.al ...

  7. Qt 学习之路 :可视化显示数据库数据

    前面我们用了两个章节介绍了 Qt 提供的两种操作数据库的方法.显然,使用QSqlQuery的方式更灵活,功能更强大,而使用QSqlTableModel则更简单,更方便与 model/view 结合使用 ...

  8. RuntimePermissions

    This sample shows runtime permissions available in Android M and above. Display the log on screen to ...

  9. UITextField控件处理键盘弹出时遮住输入框的问题

    原文连接: http://www.devdiv.com/thread-70159-1-1.html 实现以下三个方法,如果弹出的键盘会遮住输入框 ,整体的界面会向上移动,这样就不会遮住输入框了.自己增 ...

  10. CentOS7搭建SAMBA服务器实现与WIN10匿名共享文件

    1.安装SAMBA yum -y install samba samba-client samba-common 2.修改文件打开数 vi /etc/security/limits.conf 最后添加 ...