关于css的层叠上下文和层叠顺序问题

关于css的层叠上下文和层叠样式问题

最近在项目中遇到了一个让我欲仙欲死的问题，我给项目中的图片设置了一个淡入效果，几opacity变化，但当我在它的上面有一个定位元素时，动画结束后，定位元素居然被遮住了,百思不得解，谷歌了白天，才知道是层叠上下文、层叠顺序搞得鬼，所以这里把搜索的结果记下来，帮自己，也帮能够看到的盆友。

这里贴出一个解释很详细的地址，要是看了不太明白的，可以戳这里哦

首先层叠上下文是什么鬼呢？

层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，那么他这z轴方向就会比其他元素高一些。可以理解为在网页中的同一片区域中。如果有两个元素重叠，那么那个含有层叠上下文的元素一定覆盖在没有层叠上下文元素的上面。

那么层叠顺序又是什么鬼呢？

“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序,层叠顺序即是层叠的规则。我想了解css的童鞋一定知道页面上的元素是分层级的。background/border<负z-index<block块状水平盒子<float浮动盒子<inline/inline-block水平盒子<z-index:auto或看成z-inde:0<正z-index；



没错，这就是层叠顺序，但这只是css2.1时代的层叠顺序，当css3出现之后，就出现了一些令人蛋疼的东西了，我遇到的问题也正是css3的animate属性带来的层叠上下文变化所带来的影响；

这里有一些关于层叠准则和层叠上下文特性，了解了这些，再加上css3带来的新的层叠上下文属性，就不难发下我们的问题出现在哪里了；

下面这两个是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：

1. 谁大谁上：当具有明显的层叠标识的时候，如z-index值时，在同一个层叠上下文领域，层叠水平值大的那个覆盖层叠水平值小的那个。
2. 后来居上：当元素层叠水平、层叠顺序一致时，在DOm流中处于后面的元素会覆盖前面的元素。

层叠上下文元素有如下特性：

1. 层叠上下文的层叠水平要比普通元素高(在css2.1时代，层叠上下文元素应该就是有定位属性的这一类元素吧)
2. 层叠上下文可以阻断元素的混合模式
3. 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文
4. 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素
5. 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

下面我们来看看CSS3与新时代的层叠上下文

1. z-index值不为auto的flex项(父元素display:flex|inline-flex).
2. 元素的opacity值不是1.
3. 元素的transform值不是none.
4. 元素mix-blend-mode值不是normal.
5. 元素的filter值不是none.
6. 元素的isolation值是isolate.
7. will-change指定的属性值为上面任意一个。
8. 元素的-webkit-overflow-scrolling设为touch.

结论：

不难看出，我的问题是出来了opacity和dom的顺序上了，在给图片设置fade-in是，改变的是它的opacity属性，这样就将它变成了层叠上上下文元素了，而我的文字又在它的上方，且没有设置z-index属性，自然当它的opacity属性变成1之后文字就被遮住了。

最后希望这篇文章对大家有所帮助。同事再次贴出我认为比较讲解比较详细的一片blog供大家参考，戳这里