Question

我正在创建一个使用Bootstrap框架的网站，其视频背景使用固定定位和％100高度和宽度。我也尝试使用固定定位创建粘性导航。下面的代码在Firefox甚至IE9＆amp; 10，但不是Chrome？我完全不知道该怎么做，我宁愿避免使用JS来解决这个问题。我的代码如下（注意：这个网站正在开发为一个Shopify主题的funzies，所以不要介意液体代码） 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;}）并使其成功？

Answer 1

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

谷歌Chrome固定定位问题

1 个答案: