En desarrollo web es bastante habitual superponer elementos controlando su profundidad con z-index. Hacer esto nos permite generar diseños más complejos que satisfagan las necesidades del proyecto.
Por defecto, el elemento sobre el que recae la interactividad es el que quede encima del todo, lo que hace que cuando usamos un div que cubra todo un área (como puede ser el caso de los overlays), se bloquee lo que hay detrás. Esto es algo que puede ser problemático cuando queremos que el elemento que se encuentra por debajo tenga enlaces. Por suerte, actualmente con CSS podemos solucionarlo.
Usando la propiedad pointer-events, podemos controlar si queremos que un elemento intercepte los eventos del ratón, de modo que si forzamos que un div no lo haga, esos eventos recaerán en el inmediatamente inferior y por tanto ya se podrá hacer click en los enlaces. Si implementación la podemos hacer de este modo.
.div-superior {
pointer-events: none;
}Si eres maquetador web, este pequeño tip te ayudará mucho a simplificar la estructura de tus portales y sobre todo a resolver problemas en webs sobre las que no tienes control del HTML.
Deja una respuesta