如何创建Web应用程序教程/自学指导模式。 Z-index属性问题

Question

我正在为我的应用程序创建教程模式。我有一个全屏div，覆盖所有网站区域，黑色，80％不透明度。如何在该div中剪切区域以显示选择元素？记住我想阻止其他元素。我的意思是这样的：

我用z-index尝试了很多东西，它有时会起作用，但通常不可能解决。有时高光元素的父元素需要具有z-index属性，有时父元素具有背景颜色（不是元素内部），并且它在较高的z-index上是不可见的，因为它没有自己的背景颜色。

我该如何解决这个问题？

PS：我在这里创建了一个JSFiddle，例如标头问题：JSFiddle

header
{
	display: flex;
	justify-content: space-between;
  align-items: center;
	position: fixed;
	width: 100%;
	height: 80px;
	top: 0;
	left: 0;
  background-color: yellow;
}

.avatar
{
	transition: all 100ms ease-in-out;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	display: inline-block;
	float: left;
	margin-right: 20px;
	margin-left: 80px;
	background-color: red;
	background-size: 100% 100%;
	cursor: pointer;
	position: relative;
	filter: drop-shadow(5px 5px 20px rgba(0,0,0,1));
}

.fullscreen-flex
{	
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
  background-color: rgba(0,0,0,0.8);
}

.tutorial-task
{
	position: relative;
	z-index: 105;
	background-color: white;
}

<header>
  <div class="avatar tutorial-task">
  </div>
    <div class="avatar">
  </div>
</header>

<div class="fullscreen-flex">

</div>

PS2：问题在于固定标头。但它必须要修复。