前端选项卡无法选中，被图片遮挡

前端图片部分css代码如下

.map{  position:relative; height: 5.6rem; z-index: 9;}
.map4{ width: 7.78rem; /* 将宽度减少 20% */
	height: 6.5rem; /* 将高度减少 20% */
	position: relative; 
	  left: 50%; top: 4%;
	   margin-top: .1rem;
	margin-left: -3.9rem;
	z-index: 999;}
.map5{ width: 7.544rem; /* 将宽度减少 20% */
		height: 6.3rem; /* 将高度减少 20% */
		position: relative; 
	  left: 50%; top: 5%;
	   margin-top: .2rem;
		margin-left: -3.772rem;
		z-index: 9999;}
	
.map1,.map2,.map3{ position:absolute; opacity: .5}
.map1{ width:6.43rem; left: 53%; top: 27%;
	margin-top: .2rem;
	 margin-left: -3.772rem;z-index: 2;  animation: myfirst2 15s infinite linear;}
.map2{ width:5.66rem; left: 54.8%; top: 31%;
	margin-top: .2rem;
	 margin-left: -3.772rem; z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
.map3{ width:5.18rem; left: 56%; top: 33%;
	margin-top: .2rem;
	 margin-left: -3.772rem; z-index: 1;}

vue选项卡css如下

*{
    margin: 0;
    padding: 0;
    z-index: 999999;
}
.box{
    width: 100%;
    height: 100%;
    /* margin: 100px auto; */
    z-index: 999999;
}
.box .header{
    height: 35px;
    width: 100%;
    line-height: 35px;
    z-index: 999999;
    
    
    
}
.box .header span{
    float: left;
    width: 100px;
    
    z-index: 9999999;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.box .header span:last-child{
    border-right: none;
    z-index: 999999;
}

可以看出来选项卡的z-index是999999，远大于图片的z-index。

但是为什么会出现遮挡现象？

在页面中使用右键，通过检查可以看到

所以只需要在选项卡的css中将position设置为static以外的即可

这样选项卡就不会被图片遮挡

另外可以多通过网页检查发现问题