1

I have a navigation bar, and the dropdowns are absolutely positioned, but for some reason, they still appear behind all other positioned items, no matter what the z-index. This makes the menu both ugly and difficult to use on pages with positioned items. Here is a codepen that shows my navigation bar and the problem it's having. Does anyone know what's wrong?

Here's a small spinet of my css since I don't think you want the full 150 lines of code in my question:

header nav ul li ul {
    background-color: #00242b;
    transition: opacity 400ms ease-in;
    opacity: 0;
    position: absolute;
    height: 0px;
    z-index: 1000000000; /* why wont this work? */
    overflow: auto;
    transform: translate(0px, 0px);
    overflow: auto;
}
#absolute { /* this is on top despite the lower z-index */
    position: absolute;
    width: 80px;
    height: 40px;
    background-color: red;
    z-index: 0;
    left: 20px;
    top: 80px;
}
Liam Bloom
  • 164
  • 2
  • 10

2 Answers2

2

Your nav element has position: sticky; but doesn't have any z-index. This means that anything positioned inside it is going to be positioning itself based off of that nav parent. If you add a z-index number higher than any other element on the page to that nav element, your nav will behave as you expect.

To use your example, the red box has z-index: 1;. If you add z-index: 2; to the nav element then your entire navigation will sit above it.

There is no need to have any of the children of nav z-indexed once this fix is in place as the parent element will positioned above everything else on the page already.

itsallgoodie
  • 418
  • 2
  • 7
0

First, try not to use such a high z-index. Start at 1, 10, 50, 100 or so. That way when you have a really high element you want to cover all elements that gets the highest number

To fix this: remove the z-index from anywhere else and start with the element to want to be high first.

In this case 

header nav {
   z-index: 1;
}

The default is z-index: auto.

Thomas Cayne
  • 1,132
  • 8
  • 15
  • the default is not `0` but `auto` and both aren't the same – Temani Afif Aug 21 '19 at 18:56
  • not semantics. Read the sentence in the link you provided saying *if your element doesn't create its own stacking context* which make both of them different .. also check the duplicate link to see the difference ... and if still not convinced here an example : https://jsfiddle.net/r5adnf4w/ (the child element is behaving differently due to the difference between auto and 0) – Temani Afif Aug 21 '19 at 19:07
  • *All this is not necessary* --> you are adding an answer inside a community website and it will be visible to many users and I noticed a *wrong* information so I commented to avoid any confusion (you did a contribution and I am doing the same). You are not obliged to reply to my comment and you can simply ignore them. Like you are free to answer I am free to comment on any answer. This is how the website works. Sorry but I will not *move one* If I feel the need to comment in order to clarify things or ask for clarification. – Temani Afif Aug 21 '19 at 19:17