1CSS2.1堆叠上下文.Z-index:0—定位元素。这些形成新的堆叠上下文。PositiveZ-index—定位元素。堆栈中的最高级别。现在是作者翻译的时候了！在解释以上术语之前，需要先明确两个术语：“定位”是指元素的位置是相对的、绝对的、固定的，“非定位”则相反。背景和边框：建立堆叠上下文元素的背景和边框。Negativez-indexatthefirstlevelinthecascade：负z-index的后代元素建立的级联上下文Block-levelbox：文档流中非inline-level的非定位后代元素Floatingbox：非定位浮动元素（注意：即不包括位置为：相对的浮动框）内联框：文档流中的内联级非定位后代元素Z-index：0：定位元素。这些元素建立了一个新的堆叠上下文（作者注：不一定，详见后文）PositiveZ-index：（z-index为正）对元素进行定位。上面列出了层叠的***级引用。但作者提醒读者，将元素定位在“Z-index:0”级别并不一定会创建新的堆叠上下文。因为：CSS2.1:(z-index:auto)Thestacklevelofthegeneratedboxinthecurrentstackingcontextis0.Theboxdoesnotestablishanewstackingcontextunlessititstherootelement。当定位一个元素z-index:auto时，生成的box在当前stackingcontext中的level为0。但是该box不会创建新的stackingcontext，除非它是根元素。规范是这样的，但是IE6-7有一个BUG，定位元素即使z-index:auto仍然创建了一个stackingcontext。以上就是基于CSS2.1的级联上下文的介绍。下面将对CSS3新环境下层叠上下文的新变化进行说明。2CSS3带来的变化总的来说，变化可以归为两点，稍后我们将一一讨论：CSS3中的许多属性会创建局部堆叠上下文。tranform属性改变绝对定位子元素的包含块。2.1创建新的stackingcontext的情况如下该情况会产生一个新的stackingcontext：Rootelement(HTML)Absoluteorrelativepositioningandz-indexvaluenotautoflexibleitemFlexItem,andz-indexvalueisnotauto，即父元素显示：flex|inline-flex元素的opacity属性的值小于1元素的transform属性的值不是nonemix-blend-mode的值元素的属性不正常元素的filter属性的值不正常元素的isolation属性的值在isolateposition:fixedwill-change中指定了以上任何一个属性，即使你不直接定义这些属性元素-webkit-overflow-scrolling属性值touch/Understanding_z_index/The_stacking_context，提醒读者不要看中文版，因为中文版不是实时更新的，翻译的也不是很accurate它所在的堆叠上下文中的级别。让我们以不透明度为例。来看下CSS3规范中的话：如果不定位不透明度小于1的元素，实现必须绘制它创建的层，在其父级堆叠上下文中，以与将使用的相同堆叠顺序使用“z-index：0”和“不透明度：1”定位元素。如果定位了不透明度小于1的元素，则“z-index”'1被描述为适用于Caplies2的属性[]因为总是创建一个新的堆栈上下文。如果一个元素的不透明度小于1且未定位，则必须按照其定位时的堆叠顺序在其父级堆叠上下文中绘制，z-index：0和不透明度：1。如果不透明度小于1和定位，根据CSS2.1应用z-index属性，但auto被视为0，因为总是创建新的堆叠上下文。下面的例子：div{width:100px;height:100px;}#box1{position:absolute;background:red;top:40px;left:40px;}#box2{background:blue;}
