css aparece un índice z más alto en el inferior

Question

Estoy luchando con un problema con los índices z en css.

Tengo un artículo con z-index < 100 y otro (imagen) con un índice z de 3000 (realmente mucho más alto).

Todavía aparece el segundo debajo del primero, me vuelve un poco loco. He buscado un poco sobre el problema, he leído que puede ser causado por no poner en una posición, así que lo he intentado con la posición: fija, posición: relativa, pero ninguno de los 2 funciona.

El sitio web es: www.imagine-that.be

La imagen tiene que aparecer en la parte inferior derecha, en el lado derecho del menú. Puedes verlo ligeramente detrás del menú.

El código CSS que trato de usar:

#menulogo { 
    position:fixed; 
    bottom:40px; 
    right:100px; 
    z-index:2000; 
} 
#menulogo img { 
    position:fixed; 
    bottom:40px; 
    right:100px; 
    z-index:2000; 
} 

Realmente no tengo una pista en el momento lo que debo hacer para solucionar esto, por lo que cualquier ayuda será apreciada a lo grande !

cordiales,

Koen

Answer 1

Debe leer this MDN article a aprender cómo funciona z-index. Para solucionar su problema, solo críe a su div#menulogo en el elemento body.

Answer 2

cambiar su código como éste

#menulogo { 
    position:fixed; 
    bottom:40px; 
    right:100px; 
    z-index:2000; 
} 
#menulogo img { 
    position:fixed; 
    bottom:40px; 
    right:100px; 
    z-index:5000; //changed from 2000 to 5000 
}