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. C++ strcpy strcpy_s strncpy strlcpy

    strncpy的用法:它与strcpy的不同之处就在于复制n个字符,而不是把所有字符拷贝(包括结尾'\0'). 函数原型:char * strncpy(char *dst,const char * s ...

  2. javascript笔记整理（对象基础）

    一.名词解释 1.基于对象(一切皆对象,以对象的概念来编程) 2.面向对象编程(Object Oriented Programming,OOP) A.对象(JavaScript 中的所有事物都是对象) ...

  3. QObject，有一个生存线程（慢慢体会）

     moveToThread本来就是操作QObject的    比如把当前对象移到主线程里: myObject->moveToThread(QApplication::instance()-> ...

  4. WCF技术剖析之十七：消息（Message）详解（中篇）

    原文:WCF技术剖析之十七:消息(Message)详解(中篇) [爱心链接:拯救一个25岁身患急性白血病的女孩[内有苏州电视台经济频道<天天山海经>为此录制的节目视频(苏州话)]]在上篇中 ...

  5. oracle数据库中insert与select

    前几天遇到了一个问题,insert语句中,不仅要insert页面传过来的值,还要insert select的值. 语句应该这样写: insert into 表1(字段a,字段b,...) select ...

  6. Oracle管道函数(Pipelined Table Function)介绍

    一 概述: 1.管道函数即是能够返回行集合(能够使嵌套表nested table 或数组 varray)的函数,我们能够像查询物理表一样查询它或者将其  赋值给集合变量. 2.管道函数为并行运行,在普 ...

  7. Android之一个简单计算器源代码

    通过Android4.0 网格布局GridLayout来实现一个简单的计算器界面布局   源码如下(欢迎大家指导 批评 ) package com.android.xiong.gridlayoutTe ...

  8. ASP.NET - 跳转页面

    1. Response.Redirect("../Manager/AddBookInfoImages.aspx?id=" + Server.UrlEncode(ReturnValu ...

  9. 【Unity3D自学记录】Unity3D网络之Socket聊天室初探

    首先创建一个服务端程序,这个程序就用VS的控制台程序做即可了. 代码例如以下: using System; using System.Collections.Generic; using System ...

  10. 【自由谈】城域网IPv6过渡技术——MAP技术（4）

    本节接着回答MAP技术的第三个问题:“MAP-BR的Pool是如何实现?可靠性如何提升?” 在MAP域中通过将多个MAP-BR放在同一个Pool内实现负载分担和保护倒换的.同一个Pool中的每个MAP ...