Comunidad de diseño web y desarrollo en internet online

Div con position relative hace que no funcione el onclick entre otros

Citar            
MensajeEscrito el 09 Oct 2011 01:12 am
Hola,

Me sucede que no me funciona el "onclick" de las capas, ni la propiedad "cursor". Estas capas se encuentran dentro de otra que hace de contenedor, que según he podido detectar, si le quito la propiedad "position:relative;" hace que funcione correctamente pero entonces el orden que les tengo asignadas a las capas con el "z-index" no funciona.

Resumo un poco el código para que se pueda ver más o menos como lo tengo:

Código HTML :

<div style="position:relative; z-index:-1;">
<div style="cursor:pointer;" onclick="javascript:alert('hola');">hola</div>
</div>


¿Qué puedo hacer para solucionar el problema? ¿Alguna sugerencia o alternativa?

Gracias de antemano.

Por iuconlas

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 09 Oct 2011 02:21 am
Colócale también al contenedor "position:relative" y cuéntanos si lo resolviste así

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 09 Oct 2011 09:44 am
Ya lo he probado y sucede lo mismo.

Por iuconlas

4 de clabLevel



 

safari
Citar            
MensajeEscrito el 09 Oct 2011 06:51 pm
Ok, vamos a obviar el hecho de que es una terrible práctica colocar javascript y css dentro del html.

z-index funciona si la propiedad position está explícitamente definida (por eso no funciona si le quitas "position:relative"), por otro lado, el z-index siempre es dependiente del contenedor, pero creo que eso no es relevante ahora.

Si quieres que funcione el onclick, debes hacer que ese div no quede debajo del otro, de lo contrario, el clik lo capturará el otro div, en vez de ese. Una forma de resolverlo es establecer también su z-index a un valor mayor que el otro div.

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 10 Oct 2011 12:03 am
El código tal como lo has puesto en el mensaje primero no ejecuta el onClick porque el <body> de la página tiene un z-index más alto que el primer div, éste tiene -1, entonces el que recibe el click es el elemento <body>.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 13 Oct 2011 01:39 pm
Sí señor DriverOp tienes toda la razón. Se ha solucionado el problema dando un z-index más alto al contenedor.

Por cierto The Fricky!, me comentas que es malo colocar css y javascript en el html, pero lo he puesto en el código del foro así para que se viera más claro, luego en la página lo tengo en una hoja de estilos y el evento onclick hace una llamada a una función que tengo en otra página de javascript.

Muchas gracias por la ayuda.

Por iuconlas

4 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Oct 2011 07:19 pm
Me alegra que lo tengas separado ¿también tienes separada la llamada al onclick?
Por cierto, te comentaba que me parecía que no era relevante lo del z-index del contenedor en este caso, perdón, no me había fijado que tenías el z-index en -1. Menos mal que DriverOp sí se dio cuenta

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.