Já se passou muito tempo desde que atualizei meu blog. Já se passaram 23 dias desde que comecei a trabalhar. Comecei a trabalhar no caminho certo e atualizarei regularmente meus conhecimentos e trabalhos recentes.
Hoje, deixe-me falar sobre o problema do estilo de seta da barra de guias.
Adicione um div quadrado para girar em nav-btn, use o seguinte código para obter
.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);
}Defina o nav-btn e o z-index no estado ativo para 30 (efetivo, a figura a seguir pode cobrir o nav-btn com o índice 20)
Entre eles, defina o índice z de nav-btn no estado normal para 20 e defina o índice z de rotação para 50 (maior que 30 de ativo) (não efetivo, como mostrado abaixo, rotação inativa não pode cobrir nav-btn ativo)
Mais tarde, descobri que, ao definir o z-index, todo o nav-btn definido diretamente sob a tag pai é o z-index quando está ativo. O código é o seguinte, mas na verdade, isso afetará o status da subtag navbtn rotate, levando à configuração Não tem efeito.
.nav-title-wrap{
display: inline-block;
margin-left: 25%;
.active{
//z-index：30
background: rgb(66, 163, 71);
}
}Solução:
Na verdade, em todo o código, você só precisa definir o índice z no estado normal de rotação para 20! (Esteja ativo ou não, ele sempre será exibido na camada superior) O resultado é exibido normalmente, mas há um problema, ou seja, se o texto dentro de deseja ser exibido no centro, deve ser definido como um índice z maior que 20 para evitar que seja coberto por um pequeno quadrado !
Além disso, existe um ditado na Internet: Recomenda-se usar uma imagem de plano de fundo com uma seta, diretamente uma imagem de plano de fundo + margem esquerda + índice z para obtê-la e salvar uma série de problemas de rotação. Se houver recursos de imagem de plano de fundo, é recomendável usar. O link é o seguinte:
https://www.jb51.net/css/546811.html
Além disso, é importante notar que, ao usar o índice z, você deve definir a posição, absoluta, relativa e fixa.
O z-index é um atributo renderizado com base no elemento pai. Se o elemento pai estiver em um nível baixo, é inútil para o elemento filho trabalhar duro!
Para obter mais detalhes sobre o Z-index, consulte https://www.cnblogs.com/teamobaby/p/3840226.html