z-index issue, Mask is over video?

Question

If you take a look at this page , and click the "play" icon in the slider - Then in IE, the mask is on top of the whole video/page, but the mask has a lower z-index than the div that opens up? In FF and Chrome, it is only the "close" button than is placed below the mask... Cant quite figure out why, because the mask has a lower z-index that the div with the video ?

Answer 1

Your page behaves exactly as it should.

The mask is an immediate child of the body tag, and it has a z-index of 1000.

Your video is an immediate child of an li in the anything slider that has a z-index of 1.

Therefore, even if your video itself has a z-index of 5000, it's within a stacking context that is lower (because 1 is lower than 1000) than your mask and, thus, appears behind your mask.

Best thing to do, if possible, is to make the dialog containing your video appear in the same stacking context as your mask (an immediate child of the body), if possible.