Gran Problema CSS con Diseño y DIV's ¿Se podrá hacer?

[albertcito]

Tengo un diseño el cual es de esta manera:



Si ven hay una caja que dice "Clickeame" se pude clickear, pero no completamente porque la parte de abajo hay un DIV en position:absolute que no lo deja, ya que sucede esto:



Entonces la duda es si alguien sabe como solucionar este problema, los dos están en position:absolute

[ArturoGallegos]

agrega la propiedad z-index el de mayor valor se coloca encima en tu caso seria algo como

Código CSS:

div{position:absolute;z-index:1;}
.clickeame{position:absolute;z-index:2;}
 

el z-index solo funciona sobre elementos que estan flotando o cuentan con la propiedad position en tu caso ya se cumple esta caracteristica asi que no deberias tener problemas

[albertcito]

Gracias @Ag666 el problema es que si le agrego la propiedad z-index entonces el DIV rojo quedará adelante y esa no es la idea.

Espero me puedas comprender, la idea es que la capa con fondo negro quede adelante simpre del contenido y el contenido siempre atrás :)

[albertcito]

En realidad la pregunta es como hacer para que la parte negra quede siempre adelante y donde no tenga negro que quede siempre atrás. Los otros DIV vayan escondiendose abajo de lo negro, si habrá alguna forma de DIV con lineas no cuadradas sino ovaladas.


No se si con el elemento CANVAS se podrá hacer, como hay se pueden hacer figuras!?

[furoya]

No sé si lo hubieses encontrado usando el buscador. Con un poco de ingenio. sí.
Porque seguro que las respuestas tienen un título mejor que el tuyo.

Mira si te sirve algo de esto

imagen redonda

Elemento no interactivo (puedes leer todo, pero creo que la solución está al final)

Intentando hacer triángulos en CSS

Animación amorfa en div.

[albertcito]

Furoya, gracias por la respuesta, pero era otra la duda; ya que al final el div sigue quedando cuadrado aunque la forma sea redonda o triangular, etc.

Una de las pocas formas que puede cambiar la forma sin que el div no quede cuadrado es con CSS3 cuando se rota diagonal.

Pero lo que pedía no se puede hacer ya que los elementos web son cuadrados.

[cristian_cena]

CSS ve a cada elemento html solo como una caja rectangular. Para diseños como el tuyo usan canvas.

[gebremswar]

Hola albertcito, que tal.

Iniciado por cristian_cena

CSS ve a cada elemento html solo como una caja rectangular. Para diseños como el tuyo usan canvas.

O bien usa Mapas de imágenes.

[furoya]

Tu problema, como tu título, no son muy claros, albertcito.

Vamos a suponer que lo que quieres es que se pueda clickear el rectángulo rojo, a pesar de estar tapado por el que tiene la imagen negra.

Simplemente haces "transparente" al click el que tiene la imagen negra. Es CSS, y ya está explicado en uno de los enlaces.

Vamos a seguir suponiendo que quieres clickear "a través" de la capa que está adelante, pero que la página tiene animaciones (aunque sea el arrastre de la escrolbar) y el área activa debe ser dinámica para seguir esos movimientos. Se crea una capa de imagen con shape's de las formas a seguir, y se ajusta una vez cargado el documento con javascript; que también te puede servir para reescribir y desplazar las áreas activas según la posición del scroll.

Eso está explicado en los enlaces que te dejé.

Como no podemos ver la página (y tampoco tengo ganas) no hay manera de saber exactamente cómo aplicar una solución a un problema que tampoco queda claro.
Tienes que estudiar las opciones. Y resolverlo tú, que supongo ya sabes lo que buscas.