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. 初始化Weex项目遇到的问题记录

    Weex 提供了一个命令行工具 weex-toolkit 来帮助开发者使用 Weex.它可以用来快速创建一个空项目.初始化 iOS 和 Android 开发环境.调试.安装插件等操作. 目前 weex ...

  2. 【SE】Week3 : 个人博客作业(必应词典)

    关于 微软必应词典客户端 的案例分析 [第一部分]  调研,评测 一.用户采访 1)   介绍采访对象的背景和需求: 被采访同学是马来西亚华裔叶能端同学,由于此前在马来西亚英语是第二语言,因此经常需要 ...

  3. Java的起源和发展

    程序设计语言的发展             第一代语言:机器语言   0011 1100 ……             第二代语言:汇编语言   ADD 12,0x13              第三 ...

  4. Beta吐槽

    目录 感想 管理团队 推进项目 pm吐槽 开发 经过我慎重的考虑,我jio得,Beta版本的吐槽还是不能少. 感想 管理团队 这学期十分庆幸成为我们这个这么优秀的团队的pm.身在pm的位置上经历这么一 ...

  5. delphi执行查询语句时的进度条怎么做

    procedure TForm1.FormCreate(Sender: TObject);  begin     ADOQuery1.ExecuteOptions := [eoAsyncFetch]; ...

  6. quartz.net 3.x版本如何通过xml文件进行Job配置

    在2.x版本中,我们可以简单的在quartz.config文件中通过以下Xml配置方式来注册相应的Job以及触发器 quartz.plugin.xml.type = Quartz.Plugin.Xml ...

  7. ql Server 2012完全卸载方法

    第一步,在控制面板里面找到程序——卸载程序这一项,打开之后就会是这样的了 第二步,经过第一步打开卸载程序后,在里面找到Microsoft SQLserver 2012 (64-bit)这一项,可以通过 ...

  8. bzoj 3531 [Sdoi2014]旅行 (树剖+线段树 动态开点)

    3531: [Sdoi2014]旅行 Time Limit: 40 Sec  Memory Limit: 512 MBSubmit: 2984  Solved: 1312[Submit][Status ...

  9. 【BZOJ2257】[JSOI2009]瓶子和燃料(数论)

    [BZOJ2257][JSOI2009]瓶子和燃料(数论) 题面 BZOJ 洛谷 题解 很明显就是从\(n\)个数里面选\(K\)个数让他们的\(gcd\)最大. 暴力找所有数的因数,拿个什么东西存一 ...

  10. 安装完打开 eclipse 提示 JVM 版本较低

    在安装完 eclipse 后打开出现如下提示 解决办法: 1> 去官网下载最新版本安装 地址 2> linux 下直接下载安装 1.打开终端 2.控制台输入:su 3.控制台输入个人密码 ...