Ha pasado mucho tiempo desde que actualicé mi blog. Han pasado 23 días desde que empecé a trabajar. Empecé a trabajar en el camino correcto y actualizaré periódicamente mis conocimientos y trabajos recientes.
Hoy, déjame hablar sobre el problema del estilo de flecha de la barra de pestañas.
Agregue un div cuadrado para rotar en nav-btn, use el siguiente código para lograr
.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);
}Establezca nav-btn y z-index en el estado activo en 30 (efectivo, la siguiente figura puede cubrir el nav-btn con el índice 20)
Entre ellos, establezca el índice z de nav-btn en estado normal en 20 y establezca el índice z de rotar en 50 (mayor que 30 de activo) (no es efectivo, como se muestra a continuación, el giro inactivo no puede cubrir nav-btn activo)
Más tarde, descubrí que al configurar el índice z, todo el nav-btn establecido directamente debajo de la etiqueta principal es el índice z cuando está activo. El código es el siguiente, pero de hecho, esto afectará el estado de la subetiqueta navbtn rotar, lo que lleva a la configuración No tiene efecto.
.nav-title-wrap{
display: inline-block;
margin-left: 25%;
.active{
//z-index：30
background: rgb(66, 163, 71);
}
}Solución:
De hecho, en todo el código, ¡solo necesita establecer el índice z en el estado normal de rotar en 20! (Ya sea que esté activo o no, siempre se mostrará en la capa superior) El resultado se muestra normalmente, pero hay un problema, es decir, si el texto del interior quiere mostrarse en el centro, debe establecerse en un índice z mayor que 20 para evitar que quede cubierto por un pequeño cuadrado !
Además, hay un dicho en Internet: Se recomienda usar una imagen de fondo con una flecha, directamente una imagen de fondo + margen izquierdo + índice z para obtenerla, y guardar una serie de problemas de rotar. Si hay recursos de imagen de fondo, se recomienda usar. El enlace es el siguiente:
https://www.jb51.net/css/546811.html
Además, vale la pena señalar que al usar el índice z, debe establecer la posición, absoluta, relativa y fija.
El índice z es un atributo que se procesa en base al elemento padre. Si el elemento padre está en un nivel bajo, ¡es inútil que el elemento hijo trabaje duro!
Para obtener más detalles sobre z-index, consulte https://www.cnblogs.com/teamobaby/p/3840226.html