CSS / js z-index（zIndex）下拉菜單

Question

我一直在處理一個開始給我帶來麻煩的頁面，希望您能為我提供幫助。 我的問題解釋得很簡單，我希望答案是相同的。 :)

我在頁面頂部和下面的CSS下拉菜單中都有一個js視頻播放器。 問題是下拉菜單出現在視頻播放器后面，我不知道為什么。 我在下拉菜單中使用了boostrap，並且z-index設置為1000。有人可以告訴我為什么播放器始終處於頂部嗎？

我知道我有一個針對z的zIndex選項，我希望它可以解決我的問題，但是我不害怕承認我沒有js技能。

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");
}

感謝您的所有想法。

Answer 1

您是否嘗試為包含播放器的HTML元素設置較低的z-index？

Answer 2

您的視頻播放器可能具有z-index:1001 （或幾乎任何大於1000的值）。 因此，請嘗試為下拉列表提供更高的z-index （例如999999 ）。 嘗試一下。 希望能幫助到你。 :)

Answer 3

如果是Flash電影或Flash播放器，則可能需要設置wmode = transparent http://animation.about.com/od/flashanimationtutorials/ss/flashwmode_4.htm