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. 【原创】CA证书申请+IIS配置HTTPS+默认访问https路径

    一.CA证书申请 (一). 新StartSSL注册帐号 1.    StartSSL官网 官方网站:https://www.startssl.com/ 2.    进入到StartSSL后,直接点击注 ...

  2. Github pages + Minimal-Mistakes + Disqus建立个人博客记录

    本文详细记录了利用Github pages建立个人博客的步骤. github pages官方推荐使用Jekyll生成静态网页,jekyll支持各种不同的主题,Minimal-Mistakes是一个功能 ...

  3. Unity特殊路径

    Resources: Resources文件可以在根目录下,也可以在子目录下,只要叫Resources就好.Resources目录下所有资源将被打包进游戏存放资源的archive中,Resources ...

  4. 学会清理.rncache 文件、清理已经安装的三方文件,三方引入文件

    1.来到指定文件夹.rncache路径,不会的可以百度,然后手动删除. 2.更新RN引入的文件的版本号,要记得将yarn.lock (.lock文件删掉) 3.我用 npm install 之后,然后 ...

  5. PAT甲题题解-1105. Spiral Matrix (25)-(模拟顺时针矩阵)

    题意:给定N,以及N个数.找出满足m*n=N且m>=n且m-n最小的m.n值,建立大小为m*n矩阵,将N个数从大到下顺时针填入矩阵中. #include <iostream> #in ...

  6. Scrum Meeting NO.3

    Scrum Meeting No.2 1.会议内容 之前的两天无法登录TFS服务器来生成燃尽图,再加上这种方式只能生成当日的燃尽图,我们决定改用excel生成燃尽图.(作为一个渣渣pm,我用了一下午才 ...

  7. centos 64位 下hadoop-2.7.2 下编译

    centos 64位 下hadoop-2.7.2 下编译 由于机器安装的是centos 6.7 64位 系统  从hadoop中下载是32位  hadoop 依赖的的库是libhadoop.so 是3 ...

  8. Struts2中 radio标签的详细使用方法

    首先在页面中引入struts标签库: <%@ taglib prefix="s" uri="/struts-tags"%> 在JSP页面中创建单选按 ...

  9. Daily Scrum 10.20

    今天进行了团队第一次scrum meeting,在这次会议中,我们针对NABC模型以及开发前期的工作进行了探讨. 第一次会议 主要内容如下: 为了大家接下来几周的开发效率,需要共同商量团队的一些规则 ...

  10. Log4Net使用指南之用log4net记录日志到数据库(含有自定义属性)------附Demo例子源代码

    Log4NET简介 log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具. 前提 最近做项目 ...