z-index和stackingcontext动机最近在一个项目中同时使用z-index和opacity遇到了一些问题。z-index值设置的很大，但是不起作用。找了一些资料，重新整理了一下z-index的重叠规则。z-indexMDN中对z-index的描述是：用于指定定位元素在文本中的堆叠顺序（即position:relative/absolute/fixed）。根据他们的价值观放置它们，较高的放在最上面。当z-index不是auto时，将生成一个堆叠上下文。让我们通过几个例子来谈谈什么是堆栈上下文。当常规堆叠顺序不使用z-index时，默认z-index:auto，此时>不会生成堆叠上下文（stackingcontext），所有元素都在同一层，与父元素同级.该框不建立新的局部堆叠上下文。当前堆叠上下文中生成框的堆叠级别与其父框相同。此时的堆叠顺序如下（从下到上）：根元素（HTML元素）正常流中非定位后代元素的背景和边框（这些元素的顺序以出现顺序为准）在HTML文档中，后一个会覆盖前一个）浮动元素正常流动中定位的后代元素（这些元素的顺序是按照HTML文档中出现的顺序，后一个会覆盖前一个)这是一个例子：#absdiv1{position:absolute;宽度：150px；高度：200px；顶部：10px；右：140px；边框：1px虚线#990000；背景色：#ffdddd；}#normdiv{高度：100px；边框：1px虚线#999966；背景色：#ffffcc；边距：0px10px0px10px；文本对齐：左；}#flodiv1{边距：0px10px0px20px；高度：200px；边框：1px虚线#009900；背景色：#ccffcc；}#flodiv2{边距：0px20px0px10px；浮动：对；宽度：150px；高度：200px；边框：1px虚线#009900；背景色：#ccffcc；}为了说明效果，div以反向堆叠顺序放置
position：绝对；
