Z-index quandry

HTML & CSS
1

I’ve got an odd z-index quandry

I’ve got an element with a high z-index which is laying UNDER an element with a lower z-index. Here is a REALLY dumbed down example.

<nav>
<ul>
  <li class="one">
      <ul class="hover">
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
     </ul>
  </li>
</ul>
</nav>
<main>
<div> content
   <div class="special">
   </div>
</div>
</main>

So if I hover over the li with class of one, the hover ul shows, positioned absolutely to the right of the list item being hovered. The hovered item has a z-index of 50. In the main content, the div with the special class has a z-index of 1, and there are no other containers in there with a z-index specified. But when I view it in the browser, the content of the div is placed on TOP of the hovered items.

Now one note is that the nav is position:fixed and I know that position fixed is a bit…funky…in terms of document flow. Could that be causing it? I tried adding position:relative in the hovered li, but that doesn’t seem to be enough.

2

Can you do a recreation in codepen? I could type out the possibilities of what could be the issue, but it’d be faster to spot the issue with a crude example created for us to tinker with.

1 Like
3

If its parent is z-index:1 then that child’s z-index of 50 is only relevant to the current context of the ul. If the ul overlaps with a div that has a z-index of 1 then the div wins out if it is later in the html.

A parents z-index (other than auto) is atomic and all children are confined to the parents z-index in relation to any other elements outside that context.

1 Like
4

I figured it out.

The nav (which was position:fixed) needed to have a z-index one higher than the element in the main. As soon as I did that, the z-index of 50 in the child element worked. I guess the auto value of a position:fixed element is another of those document flow quirks I need to remember…

1 Like
5

It’s mostly the same logic for all elements. Z-index is controlled by the positioned parent (other than auto) and then a higher z-index wins out. If the z-index is the same then the one later in the html wins out.

Position:fixed elements however do create a new stacking context (as do some other properties like transforms) so the fixed element takes over but creates an auto context but unlike other positioned elements it still confines the children.

Excuse the edits it’s late and I’m mostly talking nonsense :slight_smile:

4 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.