Html 谷歌浏览器修复了定位问题

我正在创建一个使用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>

---

问题是，在Chrome中，导航栏不粘，我的意思是当你滚动时，导航栏也不粘。在FireFox、IE9和IE10中，它与背景中的视频一样保持不变。我一直在寻找不同的答案，但没有找到对我的特定问题有效的解决方案。我尝试过在HTML和Body标记中添加高度。当我从视频中删除

z-index

并添加

位置：相对；z-index:5

到

.container

它似乎工作得很好，但我觉得它会更干净，更容易维护和跟踪索引，只在视频上有一个负索引，而不是在它上面的任何潜在元素上有一个正索引。对这件事有什么想法吗？有没有办法保留原来的格式（即视频背景{z-index:-1000；}）并解决它？

我在Chrome上也遇到了同样的问题。由于某种原因，Chrome似乎不喜欢负z索引值。一旦我从视频元素中删除了负z索引，它就工作得很好。

我在Chrome中也遇到了同样的问题。由于某种原因，Chrome似乎不喜欢负z索引值。一旦我从视频元素中删除了负z指数，它就工作得很好。

可能就是它们的全部fixed@brandonjordon我也很想知道，但是W3学校将position fixed定义为“元素相对于浏览器窗口的位置”。所以我不知道它们会如何相互干扰，因为它们不是相对的，而是相对于窗口本身。我知道你不想这样做，但你可能必须使用JavaScript或jQuery@brandonjordan我想我最终会选择内容的z索引，而不是视频。我希望我知道为什么Chrome呈现出与Firefox和IE如此不同的效果，这可能是他们的全部fixed@brandonjordon我也很想知道，但是W3学校将position fixed定义为“元素相对于浏览器窗口的位置”。所以我不知道它们会如何相互干扰，因为它们不是相对的，而是相对于窗口本身。我知道你不想这样做，但你可能必须使用JavaScript或jQuery@brandonjordan我想我最终会选择内容的z索引，而不是视频。我希望我知道为什么Chrome呈现出与Firefox和IE如此不同的效果

#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;

}