0

So here is my basic structure. It doesn't work in IE, any suggestions? Does IE not work well with jPlayer status?

 <div id="videodiv">
     <img src="poster.jpg">
     <div id="video">jPLayer stuff here</div>
     <button></button>
</div>

<style>
#videodiv{position:relative;}
img{z-index: 30; visibility:visible; position:relative;}
#video{z-index: 25; position:absolute; top:0px;}
button{z-index: 40; position:absolute;}
</style>

<script>
play: function (event) {
$parent.find('img.poster').css("z-index", "20");
$parent.find('img.poster').css("visibility", "hidden");
}
</script>
jaruesink
  • 1,205
  • 2
  • 14
  • 24
  • Which version(s) of IE? What do you mean by "doesn't work"? [The problems with z-index in IE8](http://stackoverflow.com/questions/1156192/internet-explorer-z-index-bug) and below are well-documented. – Blazemonger Jan 27 '14 at 19:14

1 Answers1

2

In order to make work the z-index value you need to set a non-static position for the element like position:relative. Try this:

img {
   position:relative;
   z-index: 30; 
   visibility:visible;
}
#video {
   position:relative; 
   z-index: 25;
}
button { 
   position:relative;
   z-index: 20;
}
DaniP
  • 37,813
  • 8
  • 65
  • 74
  • sorry I forgot to include the positions, but that also might be the problem maybe? I have one set at relative, and the other absolute – jaruesink Jan 27 '14 at 20:10
  • @jaruesink if one is relative and the other one absolute you need to define the same parent to make thw z-index work. When you set absolute is the div parent relative? – DaniP Jan 27 '14 at 20:11
  • like this http://jsfiddle.net/XLNCY/9018/? @jaruesink try to replicate it on some jsfiddle and which version of IE? – DaniP Jan 27 '14 at 20:32