z-index原理深入解读

z-index与css定位属性

1.层叠上下文vs层叠水平

层叠上下文是指一个普通元素有了三维的概念，拥有了z轴的概念；html中哪些元素有层级上下文？层叠上下文中的每一个元素都有层叠水平，决定了同一个层叠上下文中z轴的顺序，z轴数值越大，离我们眼睛越近。遵循后来居上和谁大谁上。

2. 层叠顺序

普通元素也有层叠水平，看看著名的七阶层叠顺序

3.z-index：auto与层叠上下文

z-index在css3之前一直与position属性配套，如果将一个元素设置定位属性，那么相当于z-index：auto; z-index：auto在层叠顺序与z-index：0没有本质差别，但是在层叠上下文中时却有本质差别；

			.ccc{
			// 定位相当于z-index：auto
				position: absolute;
				width: 100px;				height: 30px;
				background-color: #1B6D85;
				/* z-index: -1; */
			}
			img{
				position: relative;
				margin-right:10px ;
				top: 0;
				left: 0;
				z-index: -1;
			}
		   <div class="ccc">
				<img src="JavaScript基础第01天/4-笔记/images/图片15.png" />
		   </div>

原因是img的层叠上下文元素变成了html，此时div是block元素，block元素层叠顺序大于img z-index：-1

原因是img的层叠上下文元素变成了div，img z-index：-1的层叠顺序大于background-color

注意：z-index受制于层叠上下文

创建层叠上下文的其余属性

• display：flex 和z-index

		<div class="ccc">
			<div class="">
				

 

<img src="JavaScript基础第01天/4-笔记/images/图片15.png" />
			</div>
		</div>
		=======
		.ccc{
			/* display: flex; */
			background-color: #1B6D85;
		}
		.ccc div{
			z-index: 1;
			/* background-color: #1B6D85; */
		}
		img{
			position: relative;
			margin-right:10px ;
			top: 0;
			left: 0;
			z-index: -1;
		}

上面z-index:1 不会作用，因为无效，设置flex后z-index才会生效；

• opacity 不等 1
• transform 不等 none
• mix-blend-mode混合模式screen
• filter ：blur（5px）
• isolation：isolate 与混合模式
• position：fixed
• will-change：transform(了解)
• -webkit-overflow-scrolling(移动端了解)

z-index与上述非定位属性的关系
前面四种是不依赖于z-index的层叠上下文
不依赖z-index的层叠上下文水平顺序相当于z-index：auto

依赖z-index创建层叠上下文的两种常见方法：一种是position属性，另外一种display flex

z-index的实践

• 最小化影响原则
  ie7浏览器定位属性也会创建层叠上下文，所以1. 尽量少使用定位元素；2.定位属性从大容器平级分为小容器（我的理解是在小盒子上添加定位）

• 不犯二准则
  z-index数值尽量别超过2，避免浮层组件被z-index覆盖掉
  通过js获得body下最大的z-index

• 负值index与可访问性隐藏