z-index在日常开发中算是一个比较常用的样式，一般理解就是设置标签在z轴先后顺序，z-index值大的显示在最前面，小的则会被遮挡，是的，z-index的实际作用就是这样。

但是你真的了解z-index吗？你知道它有什么特性吗？这里先抛出几个名词：“层叠顺序（stacking order）”，“层叠上下文（stacking context）”，“层叠水平（stacking level）”。

先说一下z-index的基本用法：　　

　　z-index可以设置成三个值：

  • auto，默认值。当设置为auto的时候，当前元素的层叠级数是0，同时这个盒不会创建新的层级上下文（除非是根元素，即<html>）；
  • <integer>。指示层叠级数，可以使负值，同时无论是什么值，都会创建一个新的层叠上下文；
  • inherit。父元素继承

z-index只在定位元素中起作用，举栗子：

<style>

    #box1{

        background: blue;

        width: 200px;

        height: 200px;

    }

    #box2{

        background: yellow;

        width: 200px;

        height: 200px;

        margin-top:-100px;

    }

</style>

<div id="box1"></div>

<div id="box2"></div>

我们希望box1要显示在box2上面，可能这时候有同学会说，给box1加一个z-index大于0的值就可以了，这样是不对的，如图:

box2遮挡了box1，即使box1设置z-index值再大也白搭，前面说了z-index只在定位元素（position=static除外，因为元素默认就是static，相当于没用position样式）中作用，也是就z-index要配合position一起使用。感兴趣的可以亲自验证一下，这里只抛砖引玉。

层叠顺序对绝对元素的Z轴顺序

层叠顺序其实不是z-index独有的，每个元素都有层叠顺序，元素渲染的先后顺序跟它有很大关系，总之当元素发生层叠时，元素的层级高的会优先显示在上面，层级一样的则会根据dom的先后顺序进行渲染，后面的会覆盖前面的。文字再多可能也没有一张图来的直接，下面这张图是“七阶层叠水平”（网上盗的，很经典的一张图）

再举个栗子，这里还是拿刚才那个栗子来说，在不用z-index的前提下，利用css层叠顺序解决遮挡问题，代码修改如下

<style>

    #box1{

        background: blue;

        width: 200px;

        height: 200px;

        display:inline-block;

    }

    #box2{

        background: yellow;

        width: 200px;

        height: 200px;

        margin-top:-100px;

    }

</style>

<div id="box1"></div>

<div id="box2"></div>

这里只做了细微的修改，就是给box1加了一个display:inline-block;的样式，这里解释一下，首先box1和box2发生了层叠，然后box默认为块级元素，即display：block，从七阶图中看出，display：block的元素的层叠水平低于display：inline-block的元素，所以浏览器就将box2渲染到box1上面，如图：

灵活的运用七阶图可以让你的代码尽可能的减少z-index的使用。因为多个人开发同一个系统，如果过多的用z-index，很有可能会出现冲突，即遮挡问题，一般来说z-index使用10以内的数值就足够了。

重点：层叠上下文

　　先说一下如果创建层叠上下文，css创建层叠上下文的方法有很多，但是常用的也就够那么几种

　　1、定位元素中z-index不等于auto的会为该元素创建层叠上下文

　　2、html根元素默认会创建层叠上下文（这是一个特例，知道就行）

　　3、元素的opacity不等于1会创建层叠上下文

　　4、元素的transform不等于none会创建层叠上下文

还有其它方式创建层叠上下文，这里就不做介绍了，上面四中是开发中常用到的。

那么知道怎么创建层叠上下文之后，问题的关键来了，层叠上下文有什么用呢？

这里一定要结合前面那张七阶图，最下面那一层便background是建立在层叠上下文的基础上的，也就是说在层叠上下文中，所有的元素都会渲染在背景和边框上面；在block盒子、float盒子等不存在层级上下文的元素中，子元素设置z-index为负值的时候，那么子元素会被父元素遮挡。说了可能不太好理解，举个栗子消化一下：

<style>

    #box1{

        position: relative;

        width: 200px;

        height: 200px;

        background: blue;

    }

    #box2{

        position: relative;

        z-index:-1;

        width: 100px;

        height: 100px;

        background: yellow;

    }

</style>

<div id="box1">

      <div id="box2"></div>

</div>

这里，box并没有创建层叠上下文，当子元素box2设置z-index:-1时，box2所在的层叠上下文是根元素，即html根标签，根据七阶图可以看出，box2会渲染在html标签上面，普通盒子box1(z-index:auto)下面，所以box2被遮挡了。如图所示：

那么怎么解决这个问题呢？相信大家已经知道这里该怎么处理了吧，是的，为box1建立一个层叠上下文，那么box1中的元素无论z-index是负的多少，都会显示在box1的背景之上，如图：

这里我用了前面说的的第一种方式去创建层叠上下文，即定位元素中z-index不为auto的元素会建立层叠上下文，可能有的同学开始纳闷了，box1的z-index小于box2的z-index，为什么box2缺显示在box1的上面呢？呵呵，这正对应了七阶图的层叠水平的关系，不明白的再仔细揣摩一下七阶图。

· 层叠水平仅在直接父级层叠上下文中进行比较，即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较。举个例子

<style>

    #box1{

        z-index: 10;

        position: relative;

        width: 200px;

        height: 200px;

        background: green;

    }

    #box1_1{

        position: relative;

        z-index: 100;

        width: 100px;

        height: 100px;

        background: blue;

    }

    #box2{

        position: relative;

        z-index: 11;

        width: 200px;

        height: 200px;

        background: red;

        margin-top: -150px;

    }

</style>

<div id="box1">

    <div id="box1_1">

    </div>

</div>

<div id="box2">

</div>

层叠上下文box1中的子元素box2设置z-index为100，而层叠上下文box2的z-index只有11，而实际的渲染效果却是，box2在box1和box1_1的上面，这就应了上面那就话，层叠水平仅在元素的第一个父级层叠上下文中进行，即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较，也就是活box1_1的z-index对于他的父级层叠上下文之外的元素没有任何影响。这里box2和box1在同一个层叠上下文中（html根元素会默认创建层叠上下文），所以它们两个会进行层叠水平的比较，box2的z-index大于box1的z-index，所以我们看到的也就是下面这样，box2遮挡了box1，不在乎box1中的子元素z-index是多少，如图：

这里我对z-index的理解也就讲述完毕了，大概就说了以下这几点内容：

　　1、z-index仅在定位元素（position不等于static）中有效

　　2、七阶层叠水平图

　　3、z-index层叠水平的比较仅限于父级层叠上下文中

其次需要注意以下几点：

　　1、在开发中尽量避免层叠上下文的多层嵌套，因为层叠上下文嵌套过多的话容易产生混乱，如果对层叠上下文理解不够的话是不好把控的。

　　2、非浮层元素（对话框等）尽量不要用z-index（通过层叠顺序或者dom顺序或者通过层叠上下文进行处理）

　　3、z-index设置数值时尽量用个位数

用了一晚上的时间整理了这篇文章，就连我自己对z-index也有了更加深刻的理解，希望对你也有帮助。如有错误 欢迎指正

http://www.cnblogs.com/bfgis/p/5440956.html

不起眼的 z-index 却能牵扯出这么大的学问（转）的更多相关文章

  1. 不起眼的 z-index 却能牵扯出这么大的学问

    z-index在日常开发中算是一个比较常用的样式,一般理解就是设置标签在z轴先后顺序,z-index值大的显示在最前面,小的则会被遮挡,是的,z-index的实际作用就是这样. 但是你真的了解z-in ...

  2. JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。

    编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...

  3. 练习2：雨淋湿了一道题，9个数字只能看清楚4个，第一个肯定不是1 [X * (Y3 + Z)]^2 = 8MN9，求出各个数字

    题目上的X代表的未知数,不一定是同一个数字. 其实这道题,直接一推敲答案就出来了,首先,积德尾数是9,说明 X*(Y3 + Z)的值尾数是3,3的因子只有1和3,所以X只有1和3候选,但是题目说第一个 ...

  4. tornado解决高并发的初步认识牵扯出的一些问题

    #!/bin/env python # -*- coding:utf-8 -*- import tornado.httpserver import tornado.ioloop import torn ...

  5. Oracle数据库搬家牵扯出的一些知识点记录

    Oracle数据库迁移过程中的一些记录 工作原因,对开发服务器的数据库进行了迁移,实际执行操作之前查了一下迁移oracle数据库的可行方案,最后用了 exp/imp 进行导出导入(这个比较简单),以及 ...

  6. jQuery弹出美女大图片

    效果:http://hovertree.com/texiao/jqimg/2/ 效果图: 下载:http://hovertree.com/h/bjaf/jdaqepet.htm HTML代码: < ...

  7. DPDK无法分出连续大页面(contiguous hugepages)的几个解决方法

    在使用DPDK或者SPDK的时候,需要在进程刚启动的时候使用rte_eal_init初始化Environment Abstract Layer,应用进程会通过这个函数告诉EAL为它映射多大的hugep ...

  8. 函数内this指向+排序+找出数组大小项+Math类

    解决函数内this指向: 1,可以在函数外提前声明变量 _this/that = this 2,通过apply()和call()来修改函数内的this指向 二者区别: 用法是一样的,参数形式不一样 f ...

  9. 熬夜肝出5大点，18张图带你彻底弄懂MySQL事务日志

    在当今社会,充斥着大量的数据.从众多APP上的账户资料到银行信用体系等个人档案,都离不开对大量数据的组织.存储和管理.而这,便是数据库存在的目的和价值.目前数据库的类型主要分为两种,一种是关系型数据库 ...

随机推荐

  1. javascript每日一练（五）——BOM

    一.BOM打开,关闭窗口 window.open(); window.close(); <!doctype html> <html> <head> <meta ...

  2. ORA-01092 ORA-12432: LBAC error: zllegnp:OCIStmtExecute 故障一例

    最近由于数据库hang住,无奈之下直接干掉了pmon进程,再次启动的时候收到了ORA-01092: ORACLE instance terminated. Disconnection forced以及 ...

  3. Javascript 调试利器 Firebug使用详解

    Javascript 调试利器 Firebug使用详解 有时候,为了更清楚方便的查看输出信息,我们可能需要将一些调试信息进行分组输出,那么可以使用console.group来对信息进行分组,在组信息输 ...

  4. uva 10127 - Ones(数论)

    题目链接:uva 10127 - Ones 题目大意:给出n,问说者少要多少为1才干够整除n. 解题思路:等于是高精度取模,直到余数为0为止. #include <cstdio> #inc ...

  5. [置顶] 让导入的Android项目，运行起来的方法。

    Eclipse里面直接import的代码,不能运行出现如下错误: [2013-12-12 12:58:55 - Dex Loader] Unable to execute dex: java.nio. ...

  6. CF卡技术详解——笔记

    知识太全面了,摘抄摘不完,还是粘过来加上注释和笔记吧. 重点以及断句用加粗,注释用红括号. 一.CF卡技术及规格 一.CF卡技术及规格 1.CF卡简史 随着数码产品的高速普及,近年来闪存卡也进入了高速 ...

  7. 【ASP.NET Web API教程】3 Web API客户端

    原文:[ASP.NET Web API教程]3 Web API客户端 Chapter 3: Web API Clients 第3章 Web API客户端 本文引自:http://www.asp.net ...

  8. 利用PS滤镜及图层叠加制作水墨荷花

    水墨荷花制作思路并不复杂:把图片转为黑白,用滤镜等增加水墨纹理即可.不过在处理的时候还有很多细节需要处理,如图片的背景,水墨纹理控制范围等,这些需要自己慢慢摸索. 原图 最终效果 1.打开素材图片,把 ...

  9. SQL 事务及实例演示

    简介 事务,英文名称是transaction.是在对数据库进行管理操作过程中一个逻辑单位,由有限的操作序列构成. 其实这个概念很好懂,简单理解就是:事务就是在使用数据库中的一个操作,由一些操作放到一起 ...

  10. javascript实现的可改变滚动方向的无缝滚动

    效果图如下: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...