Bootstrap modal z-index

Question

The issue is: I\'m using parrallx scrolling, so I have z-index in the page now when I try to popup a box-modal by Bootstrap I get him to look like this https://www.dropbox.c

Answer 1

The problem almost always has something to do with "nested" z-indexes. As an Example:

  some content A
  

    some content B
  


  Some content C

if you look at the z-index only you would expect B,C,A, but because B is nested in a div that is expressly set to 1, it will show up as C,B,A.

Setting position:fixed locks the z-index for that element and all its children, which is why changing that can solve the problem.

The solution is to find the parent element that has the z-index set and either adjust the setting or move the content so the layers and their parent containers stack up the way you want. Firebug in Firefox has a tab in the far right named "Layout" and you can quickly go up the parent elements and see where the z-index is set.