z-index它可真是一个神奇的东西,它可以随意安排你的层的叠加问题。
如你想让红色矩形压在蓝色矩形上,正常布局先建立一个红色的再建议一个蓝色的,就可以了。
但如果我相反来建立,那么就得借助z-index方法了。
 
用z-index需要先加position:absolute/relative定位,不然是不起作用的。
z-index 是要考虑父级的,如果父级z-index为2,那么子级为200也不会覆盖住父级z-index为4子级为2的图层的。
 
在标准浏览器中,对父级的要求不是特别高,同级的对应上z-index可以了。但要注意的是
父级里放一个子级那么父级是无法放在子级之上的,需要放在同一级别中才可以(经过测试的)
IE6对z-index上对父级的要求是比较高的,如果两个级别在标准浏览器中虽然好了,但IE6需要对父级也加上z-index
不然上一行中所加的z-index会无法覆盖下面的图层。所以在做的时候,需要给下一行的父级加上z-index
(前两天又研究了一下这个问题,所以需要在这个给予更加详细的说明。因为在IE6中需要给父级添加 z-index 
这样子下面的子级就会被上面的覆盖,所有要动态的改变一下,当经过的时候,当前的z-index增加,其它的为0.反之亦是。
【设置为1都不行,因为父级的权限最高】) 还有一点就是,IE6、7如果没有给带有定位指定z-index的话,那么它会auto创建一个层叠上下文
 
当然熟练了也就知道这些问题了,但百密中有一疏,所以做好在遇到这样问题的时候,多测试几下。不然改起来真的很累人的。
 
##转载请附加此文博客地址(小数)[http://www.cnblogs.com/mcat/]

关于z-index这个层级的问题的更多相关文章

  1. 来看看css3中的box-shadow

    不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length ...

  2. 科学计算三维可视化---Mayavi可视化实例

    一:Dragon绘制实例(三维扫描的绘制) 三维扫描主要用于对物体空间外形结构以及色彩进行扫描,用以获得物体表面的空间坐标, 他的主要意义在于能够将实物的立体信息转换为计算机能够直接处理的数据信号,为 ...

  3. 用原生JS实现一个轮播(包含全部代码和详细思路)

    在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...

  4. KineticJS教程(11)

    KineticJS教程(11) 作者: ysm 11.对象的上下关系 11.1.层的上下关系 Kinetic的层是按照添加到舞台的次序,由下向上排列,上层遮盖下层的图形.每个层各自有一个ZIndex编 ...

  5. 20-----定位 (Position)

    定位 定位有三种: 1.相对定位 2.绝对定位 3.固定定位 这三种定位,每一种都暗藏玄机,所以我们要一一单讲. 相对定位 相对定位:相对于自己原来的位置定位 现象和使用: 1.如果对当前元素仅仅设置 ...

  6. Python科学计算三维可视化(整理完结)

    中国MOOC<Pyhton计算计算三维可视化>总结 课程url:here ,教师:黄天宇,嵩天 下文的图片和问题,答案都是从eclipse和上完课后总结的,转载请声明. Python数据三 ...

  7. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  8. 运用<div>布局页面练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 关于Cewu Lu等的《Combining Sketch and Tone for Pencil Drawing Production》一文铅笔画算法的理解和笔录。

     相关论文的链接:Combining Sketch and Tone for Pencil Drawing Production 第一次看<Combining Sketch and Tone f ...

  10. 四种比较简单的图像显著性区域特征提取方法原理及实现-----> AC/HC/LC/FT。

    laviewpbt  2014.8.4 编辑 Email:laviewpbt@sina.com   QQ:33184777 最近闲来蛋痛,看了一些显著性检测的文章,只是简单的看看,并没有深入的研究,以 ...

随机推荐

  1. SICP读书笔记 1.1

    SICP CONCLUSION 让我们举起杯,祝福那些将他们的思想镶嵌在重重括号之间的Lisp程序员 ! 祝我能够突破层层代码,找到住在里计算机的神灵! 目录 1. 构造过程抽象 2. 构造数据抽象 ...

  2. Git 命令简单罗列

    源教程出自 廖雪峰的官方网站 https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 整 ...

  3. java中多态的实现机制

    多态的概念: 简单来说就是事物在运行过程中存在的不同状态,即父类或接口定义的引用变量指向子类或具体实现类的实例对象.程序调用方法在运行期才进行动态绑定,而不是引用变量的类型中定义的方法. 多态存在的前 ...

  4. 20135202闫佳歆--week2 操作系统是如何工作的--学习笔记

    此为个人学习笔记存档 week 2 操作系统是怎么工作的 一.计算机是如何工作的?--三个法宝 (一)三个法宝 1.存储程序计算机 所有计算机的基础性的逻辑框架. 2.函数调用堆栈 在低级语言中并不很 ...

  5. Linux第七周学习总结——可执行程序的装载

    Linux第七周学习总结--可执行程序的装载 作者:刘浩晨 [原创作品转载请注明出处] <Linux内核分析>MOOC课程http://mooc.study.163.com/course/ ...

  6. 《Gogoing》Alpha版使用说明

    前言: Gogoing是由我们山药蛋团队利用课余时间,基于安卓安卓系统开发完成.该软件针对于我们大学生没有赚钱能力,却又渴望外面的世界,该软件的核心理念的是“穷”游.为当代的大学生提供一个景点推荐或者 ...

  7. 第二个Sprint冲刺第五天(燃尽图)

  8. ElasticSearch 2 (18) - 深入搜索系列之控制相关度

    ElasticSearch 2 (18) - 深入搜索系列之控制相关度 摘要 处理结构化数据(比如:时间.数字.字符串.枚举)的数据库只需要检查一个文档(或行,在关系数据库)是否与查询匹配. 布尔是/ ...

  9. 第十周PSP&进度条

    PSP 一.表格: D日期     C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 11月17号 站立会议 分配任务 13:00 13:30 0 3 ...

  10. linux 解压文件

    原文:android之常用解压缩指令 .tar解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName ---------------------- ...