0

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.

madth3
  • 7,275
  • 12
  • 50
  • 74
jhamm
  • 24,124
  • 39
  • 105
  • 179

1 Answers1

0

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

"z-index only works within a particular context i.e. 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

Community
  • 1
  • 1
feitla
  • 1,334
  • 1
  • 7
  • 12