Search code examples
cssinternet-explorerz-index

IE 10 Html 5 video overlaying text (z-index)

Looking at this page in Internet Explorer 10:

http://stage.tremorvideo.com/new/seller

At the top, there's an html 5 video autoplaying on loop (muted). There's supposed to be some text there too, overlaying the video. Despite the div containing the text having a higher z-index, it's still not showing up.

The section in question is nested in html > body > main > section with class landing-page-billboard (the second child of main).

You can see what this is supposed to look like on Chrome, Safari, or newer versions of IE.

What's going on here? Does anyone know how I can fix this?

Solution

  • For z-index to work properly, the element must have a non-static positioning, like relative or absolute.

    To fix your problem, please add the following:

    .landing-page-billboard .tout-wrapper {
   ⋮
   position: relative;
   z-index: 1;
}

    No need to go crazy with z-index numbers. 1 will be enough :)