z-index基本介绍：在三维坐标空间中，通常用x轴表示水平位置，y轴表示垂直位置，z轴用于表示纸张内外的位置，如下图：css允许的z-index值有●auto（自动，默认值）●（整数）●inherit（继承）当设置为整数时，值越大，越接近用户。如果两个元素放在一起，占据一个公共区域，那么z-index高的元素会覆盖掉z-index低的元素的公共区域部分。关于z-index的三点思考●当一个定位元素有z-index值，和正常文档流中的元素重叠时，谁会被放在最上面？●当一个定位元素和一个浮动元素重叠时，谁被放在最上面？●z-index必须和定位一起使用才能生效吗？●z-index大的元素一定会覆盖z-index小的元素吗？解决上述问题需要深入理解z-index的原理，以及层叠上下文和层叠顺序。stackingcontext的概念：stackingcontext是HTML中的一个三维概念。相当于在水平面上创建了一个z轴，有层叠上下文的元素会离用户更近。它包含一组相互叠加的元素。我们创建的每一个网页都有一个默认的层叠上下文，层叠上下文的根是html，所有其他元素都会在这个层叠上下文中占据一个层级，或高或低。Stackingorder:Stackingorder:这是一个规则，表示当元素重叠时在z轴上的显示顺序。在一个堆叠上下文中，有七种堆叠顺序：(1)backgroundandborder：建立堆叠上下文的元素的背景和边框，栈中的最低层(2)negativez-index：当z-index为negative产生的级联上下文(3)block-levelbox：文档流中的普通块级元素(4)floatingbox：非定位浮动框(5)inlinebox：文档流中的inline-levelbox(6)z-index:0定位建立新层叠上下文的元素。(7)positivez-index：栈中的最高层。内联元素在页面中的堆叠顺序之所以高于浮动元素和块元素，是因为浮动和块级框主要用于布局，而内联元素用于显示页面内容。比他高那么多。ps：图片inline和inline-block中缺失的信息是同一层级z-index:0其实和z-index:auto是一样的，简单的从stacking层级上看。级联顺序规则谁大谁先：当同一个级联上下文字段中有明显的级联级别标记，比如z-index值时，级联级别值大的会覆盖小的：当元素级联当层级一致且堆叠顺序相同时，DOM流中后面的元素会覆盖前面的元素。层叠上下文元素的特点●层叠上下文的层叠层次高于普通元素；●层叠上下文可以嵌套，内层层叠上下文及其所有子元素都服从于外层层叠上下文。●每个层叠上下文不影响其兄弟元素，在进行层叠变化或渲染时，只与该元素的后代元素相关。●每个堆栈上下文都是独立的。当元素被堆叠时，它们的堆叠顺序取决于父堆叠上下文的堆叠顺序。级联上下文创建（1）根级联上下文：指的是页面的根元素，即html元素。这就是为什么当绝对定位元素定位到left/top等值时，如果没有其他定位元素的影响，就会相对于浏览器窗口定位。(2)定位元素包含position值为relative或absolute的定位元素，FireFox/IE浏览器(Chrome等webkit内核浏览器固定自动形成级联上下文，无需设置z-index为值)在position:fixed定位元素下，当其z-index值不为auto时，将创建一个堆叠上下文。演示：(1)
