make element in front of others ... z-index?

Question

i have just added a floating navigation menu to my website.

The problem is that some images of the page are still coming over it

I tried

z-index: 99999;

but it didn't change anything.

Check out the test page to see the problem live (scroll down the page and you will see) https://www.ni-dieu-ni-maitre.com/index2.php

Answer 1

You must use 'position' in your css in case that you want use z-index. Use one of this:

position: relative;
position: absolute;
position: fixed;

Answer 2

Mobile WebKit and Chrome 22+, a new stacking context is created by position: fixed, even when z-index is auto.

So the stacking context hierarchy looks like this:

• document root (z-index 0)
  • #element (z-index 9998)
  • #element2 (z-index 0)
    • .aboveElement (z-index 9999)
    • .belowElement (z-index 9997)

You cannot compare 9998 with 9999 or 9997 to determine stacking order. Instead, 9999 is compared with 9997 to determine which of .aboveElement and .belowElement is further in front, and then once everything inside #element2 is stacked in that context, it's treated as a single layer at z-index 0 which gets stacked behind #element at z-index 9998.

Read the stacking context in mozilla

Read the stacking change for fixed elements in Chrome.