1

我正在创建一个使用 Bootstrap 框架的网站，其视频背景使用固定定位和 %100 高度和宽度。我还尝试使用固定定位创建粘性导航。下面的代码在 Firefox 甚至 IE9 和 10 中运行良好，但不是 Chrome？我完全不知道在这里做什么，我宁愿避免使用 JS 来解决这个问题。我的代码如下（注意：这个网站正在开发为 Funzies 的 Shopify 主题，所以不要介意液体代码） HTML 标记：

    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
  <source src="{{'jelly_fish_particle_system_640x360.mp4'| asset_url}}" type="video/mp4"> 
</video>

  <a class="brand" href="index.liquid">{{'logo.png' | asset_url | img_tag}}</a>
<div class="navbar">

  <div class="navbar-inner">

    <ul class="nav pull-right">

      <li><a href="#">Link</a>          
      <li><a href="#">Link</a>          
      <li><a href="#">Link</a>          
      <li><a href="#">Link</a>

   </ul>

和相关的CSS：

#video_background
{
  position: fixed; 
  right: 0px; 
  min-width: 100%;
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden
}
.brand
{
  position:fixed;
  z-index:11;
  left:0;
  top:0;
}
.navbar
{
  background-color:#000;
  color:#fff;
  position:fixed;
  z-index:10;
  width:100%;
  height:100px;

}

问题是在 Chrome 中，导航栏不是粘性的，我的意思是当你滚动时，导航栏也是如此。在 FireFox 和 IE9 和 10 中，它保持不变，背景中的视频也是如此。我搜索了不同的答案，但没有找到适用于我的特定问题的解决方案。我尝试为 HTML 和 Body 标签添加高度。当我z-index从视频中删除并添加它时position:relative; z-index:5，.container它似乎工作得很好，但我觉得它会更干净，更容易维护和跟踪索引，只在视频上有负面索引，而不是正面索引将在其之上的任何潜在元素。对这个问题有什么想法吗？无论如何要保留原始格式（即#video_background{z-index:-1000;}）并解决问题吗？

4

1 回答 1

1

我在 Chrome 中遇到了同样的问题。似乎由于某种原因 Chrome 不喜欢负 z-index 值。一旦我从视频元素中删除了负 z-index，它就可以正常工作了。

于 2013-10-17T16:42:05.727 回答