Z-index not working with position fixed

Question

I am trying to add some overlay instruction via chardinjs to my website. I have a fixed navbar with an image. I want the overlay to look as it looks on the chardinjs page. Here is my html:

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container navbar-container">
        <a class="brand" href="/web/Home"><img src="assets/header-logo2.gif" data-intro="Click logo to return to main portal" data-position="bottom" class=" chardinjs-show-element chardinjs-relative-position"></a>
      </div>
    </div>
  </div>

This site is built using Bootstrap, so all of the classes are inline with basic Bootstrap. My navbar is fixed to the top of the page with position: fixed and the z-index is 1030 . The navbar-inner , container and brand have no listed z-index or position. The img has position: relative and z-indez: 9999999 . The only way to make the image show above the overlay is to set the navbar to position: relative and remove the z-index. I dont want my navbar moving, but more importantly, I want to know why. Any help this issue will be great.

Answer 1

See this answer: z-index not working with fixed positioning

"z-index only works within a particular context ie relative, fixed or absolute position.

z-index for a relative div has nothing to do with the z-index of an absolutely or fixed div." @cusimar9