今天做游戏的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. 数学 ZJOI 2012 数列

    #include <iostream> #include <cstring> #include <cstdio> using namespace std; ; st ...

  2. Delphi 客户端调用Webservice 的TClientdataset 报出“http://www.borland.com/namespaces/Types-IAppServerSOAP”

    http://www.borland.com/namespaces/Types-IAppServerSOAP 服务器未能识别 HTTP 头 SOAPAction 的值 (2011-04-25 16:4 ...

  3. vim 的升级 安装 重装

    转载自http://blog.chinaunix.net/uid-22891521-id-2109310.html 由于一直以来在一个很old的linux版本下搞开发,里面的vim固然也是一个很old ...

  4. cache的工作原理

    http://www.360doc.com/content/11/0307/21/3791508_99049437.shtml TLB(Translation Lookaside Buffer,也称快 ...

  5. 什么是method swizzling

    其实跟字面的意思很相近.方法的调和.可以去修改oc中两个方法的调用. 这张图看起来会比较形象 20130718230430859.png 就是把两个实现调换具体的做法,首先,用Categroy建立自己 ...

  6. @property 的本质是什么?ivar、getter、setter 是如何生成并添加到这个类中的

    出题者简介: 孙源(sunnyxx),目前就职于百度 整理者简介:陈奕龙(子循),目前就职于滴滴出行. 转载者:豆电雨(starain)微信:doudianyu @property 的本质是什么? @ ...

  7. kafka单机安装配置

    1.下载kafka wget https://www.apache.org/dyn/closer.cgi?path=/kafka/0.8.2.1/kafka_2.9.2-0.8.2.1.tgz 2.解 ...

  8. mongo 多条件 查询

    var query1 = Query<BaseManagerForCompanyModel>.EQ(q => q.sGuidBaseCompany, sGuidBaseCompany ...

  9. mongoDB的基本使用----飞天博客

    Mongo的介绍:这个mongoDB官网说的好啊,MongoDB是一个开源的基于document的数据库,并且是优秀的NoSQL数据库,并且它是用C++写滴哈,非常有效率.一些什么特点呢? 全索引支持 ...

  10. Java基础知识强化之IO流笔记14:递归之输出指定目录下所有java文件绝对路径的案例

    1. 需求:输出指定目录下的所以.java结尾文件的绝对路径的案例:  分析:  A:封装目录  B:获取该目录下的所有文件和文件夹的File数组  C:遍历这个File数组,得到每一个File对象的 ...