fixed定位层级高于absolute定位的层级，absolute定位元素反而在上面，不能被覆盖

fixed定位 zindex=100,absolute定位 zindex=20,absolute定位的元素在fixed定位的元素上面

现象说明 fixedzindex > absolutezindex

// a元素样式
.leftChild {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 20;
}
// b元素样式
.rightChild {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

效果图：leftChild元素位于rightChild元素上方，尽管rightChild 的zindex更大

代码结构分析

html结构
<div class="main">
	<div class="top">
		<div class="left">
			<div class="leftParent parent">
				parentA
				<div class="leftChild child">
					leftChild
				</div>
			</div>
		</div>
		<div class="right">
			<div class="rightParent parent">
				parentB
				<div class="rightChild child">
					rightChild
				</div>
			</div>
		</div>
	</div>
</div>
style
.top {
	height: 100%;
	padding-right: 500px;
	position: relative;
}
.left {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}
.right {
	width: 500px;
	height: 100%;
	background-color: yellow;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
.parent {
	position: relative;
	width: 100%;
	height: 300px;
}
.child {
	width: 200px;
	height: 200px;
}
.leftChild {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 20;
	background-color: papayawhip;
}
.rightChild {
	position: fixed;
	left: 80px;
	top: 20px;
	z-index: 100;
	background-color: pink;
	text-align: right;
}

细心的同学会发现

1. left元素和right元素是兄弟元素
2. left元素的zindex比right元素的zindex值更大
   那么造成这个种现象的原因是什么呢？我们来看MDN是怎么说的
   
   fixed属性会创建新的层叠上下文，当元素祖先的transform,perspective活filter属性非none时，容器由视口改为该祖先。
   结合案例可以看出：
   1、rightChild的父元素position设为relative,所以此时zindex相对的容器视口为rightParent
   2、rightParent的父元素是right
   3、right元素绝对定位zindex为1，而left元素zindex为2，所以在parentRight元素中的任何子元素，只要设置的position=fixed，定位的元素zindex设置的再大,也会被leftChild 覆盖
   解决方式：
   设置left元素的zindex大于right元素的zindex

.left {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.right {
	width: 500px;
	height: 100%;
	background-color: yellow;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
PS：z-index相同的情况下，后面一个元素的层级更高

刷新页面效果图如下：

同学是否有遇到类似的问题呢？欢迎留言讨论