今天做游戏的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. 数据结构(并查集):COGS 260. [NOI2002] 银河英雄传说

    260. [NOI2002] 银河英雄传说 ★★☆   输入文件:galaxy.in   输出文件:galaxy.out   简单对比时间限制:5 s   内存限制:128 MB [问题描述] 公元五 ...

  2. DFS hdu 1016

    http://acm.hdu.edu.cn/showproblem.php?pid=1016 #include <iostream> using namespace std; int a[ ...

  3. nyist 58 最小步数 BFS

    最少步数 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 1,0 ...

  4. Apache multiple domains setup

    Running several name-based web sites on a single IP address. Your server has a single IP address, an ...

  5. svn server安装配置

    安装平台:RHEL5 1.安装软件:httpd.subversion.mod_dav_svn 2.修改配置 修改/etc/httpd/conf.d/subversion.conf.eg: LoadMo ...

  6. 《A First Course in Probability》-chaper4-离散型随机变量-负二项分布

    基于我们最为熟悉的离散型分布——二项分布,我们能够衍生出很多别的分布列,对于之前介绍过的几何分布,我们赋予其的含义是:某个事件成功的概率是p,在n次独立重复实验中恰好成功一次的概率是多少.顺着这层含义 ...

  7. Java日期相关操作

    1.获得日期 在旧版本 JDK 的时代,有不少代码中日期取值利用了 java.util.Date 类,但是由于 Date 类不便于实现国际化,其实从 JDK1.1 开始,就更推荐使用 java.uti ...

  8. 通配符的匹配很全面, 但无法找到元素 'cache:advice' 的声明

    EB-INF\classes\spring-jdbc.xml] is invalid; nested exception is org.xml.sax.SAXParseException; lineN ...

  9. [Angular 2] Using Pipes to Filter Data

    Pipes allow you to change data inside of templates without having to worry about changing it in the ...

  10. iOS 如何优雅的处理“回调地狱Callback hell”(一) (上)

    前言 最近看了一些Swift关于封装异步操作过程的文章,比如RxSwift,RAC等等,因为回调地狱我自己也写过,很有感触,于是就翻出了Promise来研究学习一下.现将自己的一些收获分享一下,有错误 ...