css higher z-index appears under lower one

Question

I'm struggling with a problem with z-indexes on css.

I have one item with z-index < 100, and another one (image) with a z-index of 3000 (really a lot higher).

Still the second one appears under the first one, it drives me a little crazy. I've searches a bit on the problem, I've read that it can be caused by not putting a position, so I've tried with position:fixed, position:relative, but none of the 2 work.

The website is: www.imagine-that.be

The image has to appear at the bottom right, at the right side of the menu. You can slightly see it behind the menu.

this is the css code that I try to use:

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

I really don't have a clue at the moment what I should do to solve this, so any help will be appreciated big time!

regards,

Koen

Answer 1

You should read this MDN article to learn how z-index works. To fix your issue, just parent your div#menulogo at the body element.