z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.
今天做游戏的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 时生效.的更多相关文章
- 【CSS学习】--- position属性
一.前言 1.HTML中的三种布局方式: 标准流(普通流):网页中默认的布局方式,即顺序布局 浮动:float 定位:position 2.position属性的作用方式: 给position属性设置 ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...
- 知识点摸清 - - position属性值之relative与absolute
两者共同特点是: 改变文档流 激活元素left.top.right.bottom.z-index属性 让元素”浮起来“,z-index>0 不同的是: 1.position:relative 会 ...
- CSS position 属性
position: relative | absolute | static | fixed 参考网站:http://blog.csdn.net/dyllove98/article/details/8 ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
- css定位position属性深究
1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...
- 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 ...
- 深入理解Oracle索引(1):INDEX SKIP SCAN 和 INDEX RANGE SCAN
㈠ Index SKIP SCAN 当表有一个复合索引,而在查询中有除了索引中第一列的其他列作为条件,并且优化器模式为CBO,这时候查询计划就有可能使用到SS ...
随机推荐
- 快速傅里叶变换(FFT):COGS 2216. 你猜是不是KMP
2216. 你猜是不是KMP ★★★☆ 输入文件:guess.in 输出文件:guess.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] XX在玩两个串的游戏. ...
- 【动态规划】Vijos P1616 迎接仪式
题目链接: https://vijos.org/p/1616 题目大意: 长度为N的字符串,只含‘j’和‘z’,可以将任意两个字符调换K次,求能够拥有的最多的'jz'串. 题目思路: [动态规划] 首 ...
- 跳跃表Skip List【附java实现】
skip list的原理 Java中的LinkedList是一种常见的链表结构,这种结构支持O(1)的随机插入及随机删除, 但它的查找复杂度比较糟糕,为O(n). 假如我们有一个有序链表如下,如果我们 ...
- android——api
一.1.复用首页做法—从Intent中获取”com.example.android.apis.Path”.根据这个结合PackageManger获得的Activities来展示不同等级的List界面( ...
- POJ 2075 Tangled in Cables (c++/java)
http://poj.org/problem?id=2075 题目大意: 给你一些人名,然后给你n条连接这些人名所拥有的房子的路,求用最小的代价求连接这些房子的花费是否满足要求. 思路: 昨天20分钟 ...
- C#中方法,属性与索引器
C#中方法,属性与索引器: TODO: 1,关于系统中常常出现的通过某一字段,查询相应实体信息(可能是一条字段或一条数据和一组泛型集合) 解说篇:1,方法,2,属性3.索引器 1.方法(1.依据状态编 ...
- 解决XCode 4.x SVN无法连接的问题
XCode升级到4.X版本后,确实好用了不少.但普通都存在SVN无法连接的问题.XCode4.x Source Control功能迁移到了File - Source Control目录下,也出现了一些 ...
- TCP/IP协议原理与应用笔记08:对等层和对等实体
1. 我们直接通过下面这个图,就可以直观了解: Outlook :收发邮件的软件组件. IE:浏览器. CutFTP:文件传输工具. 小结:因为为了完成不同的功能,所以会出现不同实体,这些不同的实体为 ...
- Unicode 与多字节编码
int _tmain(int argc, _TCHAR* argv[]) { //定义LPWSTR 类型的宽字符串 LPWSTR szUnicode = L"This is a Unicod ...
- JY03-HTML/CSS-京东02
---恢复内容开始--- 1. position:absolute 1.1 绝对定位设置定位值为百分比时: 如设置right:50%,即元素右侧外边框距离父盒子右侧始终始终为父盒子宽度的一半. 可以使 ...