CSS堆叠顺序和堆叠上下文

堆叠顺序

 

父级元素无定位	父级元素有定位
1.z-index：+	同
2.z-index：0	同
3.内联元素	同
4.浮动	同
5.块级元素	同
6.border	z-index：-
7.background	border
8.z-index：-	background

注：

1.z-index默认是auto，auto和0有区别

2.如果是兄弟元素重叠，那么后面的元素会覆盖在前面的元素上

 

堆叠上下文-stacking context

满足以下条件

• HTML 根元素
• z-index不为auto的绝对/相对定位
• z-index不为auto的flex
• 透明度小于1（opcity）  div style="background-color:rgba(255,0,0,0.5);"不是
• position:fixed
• transform属性不为none

（以上是熟识常用的，其它的具体参考MDN）