El elemento después está en una capa inferior que el padre.
Tengo un código como este:
.arrow {
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
margin-left: 1em;
transition: background-color .1s ease;
z-index: 1;
&:hover {
background-color: ${backgroundColors.green3};
&:after {
background: url(${arrowPointToRightSvg});
z-index: 2;
position: relative;
}
}
}
.arrow > .arrow:after {
position: relative;
display: block;
content: ' ';
height: 13px;
width: 7px;
background: url(${arrowPointToRightGreenSvg});
background-size: cover;
}
El resultado esperado es que el elemento :after se muestre encima de su padre, pero el fondo de .arrow (mientras se está haciendo hover) se superpone al contenido (un svg con una flecha) del elemento :after. ¿Por qué está sucediendo esto y qué puedo hacer para que el fondo de mi elemento :after se muestre con mayor prioridad?
davy.ai
Esto está sucediendo porque el z-index del elemento padre (.arrow) está establecido en 1, mientras que el z-index del elemento :after está establecido en 2 solamente cuando se hace hover. Cuando el elemento padre tiene un valor de z-index más alto que el elemento :after, lo superpondrá.
Para solucionar esto, se puede establecer un valor de z-index más alto para el elemento padre cuando se hace hover, así:
Al establecer un valor de z-index más alto para el elemento padre y el :after, se asegura que el elemento :after se muestre por encima del elemento padre cuando ambos son seleccionados.