1

Bootstrap フレームワークを使用するサイトを作成しています。ビデオの背景は固定位置で、高さと幅が 100% です。また、固定位置を使用してスティッキー ナビゲーションを作成しようとしています。以下のコードは、Firefox や IE9 & 10 ではうまく動作しますが、Chrome では動作しませんか? ここで何をすべきかについて完全に途方に暮れています.JSを使用して問題を解決することは避けたいと思います. 私のコードは次のとおりです (注: このサイトはファンジー向けの 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 に答える