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. Kubernetes调用vSphere vSAN做持久化存储

    参考 1.vSphere Storage for Kubernetes 2.IBM vSphere Cloud Provider 3.GitHub vSphere Volume examples 一. ...

  2. JSP JSTL知识结构图

    自行绘制,欢迎指正.

  3. Beta 冲刺 四

    团队成员 051601135 岳冠宇 031602629 刘意晗 031602248 郑智文 031602330 苏芳锃 031602234 王淇 照片 项目进展 岳冠宇 昨天的困难 数据交换比较复杂 ...

  4. NABCD模型

    下面是我对我们团队实现的程序的最终期待. 1.N(Need) 这里做了用户需求,所面向的用户虽然是所有英语学习群体,但是主要用户还是那群英文小说阅读者,即希望通过英文小说的阅读来提升单词量的人群. 1 ...

  5. python进阶-虚拟环境

    virtualenv # 安装 pip install virtualenv # 查看版本,确认安装完成 virtualenv --version # 创建虚拟环境 virtualenv my_env ...

  6. 学习 TTreeView [3] - Add、AddChild、AddFirst、AddChildFirst、Parent

    本例效果图: unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...

  7. sqlserver 比较两个表的列

    一.问题 给了两个各有四五十个列的表,找出他们相同的列和不同的列 二.查询两个表的列,存在临时表 --#a ,#b都是临时表,当前连接断开后自动删除--RANK() OVER (ORDER BY sy ...

  8. 【刷题】LOJ 6227 「网络流 24 题」最长k可重线段集问题

    题目描述 给定平面 \(\text{xoy}\) 上 \(n\) 个开线段组成的集合 \(\text{I}\) ,和一个正整数 \(k\) ,试设计一个算法. 从开线段集合 \(\text{I}\) ...

  9. unity3d 几种镜头畸变

    1.Fisheye distortion  鱼眼镜头 解释来自百度百科:鱼眼镜头是一种焦距为16mm或更短的并且视角接近或等于180°. 它是一种极端的广角镜头,“鱼眼镜头”是它的俗称.为使镜头达到最 ...

  10. HGOI20181029模拟题解

    HGOI20181029模拟题解 /* sxn让我一定要谴责一下出题人和他的数据! */ problem: 给出十进制数a,b,然后令(R)10=(a)10*(b)10,给出c表示一个k进制数(1&l ...