好久没更新博客了，算来算去正式入职也有23天了，工作开始步入正轨，以后会定期更新最近学习的知识和工作中踩坑的小点。
今天先来说一下，tab栏箭头样式问题
在nav-btn中增加一个用来旋转的方块div，用下面代码实现
.rotatebox{
height:42px;
width:43px;
position: absolute;
top: 8px;
left: 138px;
transform: rotate(45deg);
z-index: 20;
background-color: rgb(182, 182, 182);
}
.active .rotatebox{
background: rgb(66, 163, 71);
}将active状态下的nav-btn和的z-index设置为30（生效，如下图可以盖住下面index为20的nav-btn）
其中，将普通状态下nav-btn的z-index设置为20，rotate的z-index设置为50（大于active 的 30）（不生效，如下图不活跃的rotate不能盖住活跃的nav-btn）
后来发现，在设置z-index的时候，直接在父标签下设置的整个nav-btn为active时候的z-index，代码如下，但其实这样会影响到navbtn的子标签rotate的状态， 导致设置了也不生效。
.nav-title-wrap{
display: inline-block;
margin-left: 25%;
.active{
//z-index：30
background: rgb(66, 163, 71);
}
}解决办法：
其实整个代码中，只需要设置rotate普通状态下的z-index设置为20即可！（不管是不是active 都永远显示在顶层）结果正常显示，但是这样有一个问题，就是里面的文本如果想要居中显示的话就必须设置比20还大的z-index，才能不被小方块盖上！
另外，网上有说法：建议使用一张带箭头的背景图片，直接一个背景图片+margin-left+z-index就搞定，省去了rotate的一系列麻烦，如果有背景图片的资源，建议使用，链接如下：
https://www.jb51.net/css/546811.html
另另外，值得注意的是，z-index使用的时候一定要设置position，absolute，relative，fixed皆可。
z-index是一个根据父元素进行渲染的属性，父元素级别低的话子元素在努力也是没用的！
有关z-index的更多详细内容，参见 https://www.cnblogs.com/teamobaby/p/3840226.html