I have been working on a page that has started to give me some trouble i hope you can help me out with. My problem is explained rather simple, and i hope that the answer will be the same. :)
I have a CSS drop down menu at the top of my page and right below that i have a js video player. The problem is that the drop down menu is appearing behind the video player and i have no idea why. I am using boostrap for the dropdown menu and the z-index is set to 1000. Can anyone tell me why the player is always ontop?
I know there is a zIndex option for js that i am hoping will fix my problem, however i am not afraid to admit i have no js skills what so ever.
CSS:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
js:
function changeChannel(url, chanid)
{
var player = document.getElementById("videoplayer");
var video = document.getElementById('video');
if (video != null)
{
video.src = url;
video.load();
video.play();
}
else if (player != null)
{
player.Close();
player.Open(url, false);
}
if(chanid != 0)
{
update(chanid);
}
else
{
tvclear();
}
}
function update(channelid) {
$.getJSON('api.php', function(data) {
console.log(data[channelid][0]);
$('.now').html("<strong>" + data[channelid][0]['title'] + "</strong><br>" + data[channelid][0]['starttime'] + "<br>");
$('.next').html("<strong>" + data[channelid][1]['title'] + "</strong><br>" + data[channelid][1]['starttime'] + "<br>");
});
}
function tvclear() {
$('.now').html("No data");
$('.next').html("No data");
}
Thanks for all you thoughts.
您是否尝试为包含播放器的HTML元素设置较低的z-index?
Imt may be possible that your video player has z-index:1001
(or practically anything which is greater than 1000). So try giving a real higher z-index
to dropdown (like 999999
). Just try it out. Hope it helps. :)
如果是Flash电影或Flash播放器,则可能需要设置wmode = transparent http://animation.about.com/od/flashanimationtutorials/ss/flashwmode_4.htm
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.