20

だからこれは私がこれまでに試したことです：

<div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;">            
    <video width="520" height="390" style="z-index:-10;">
        <source src="m/video.ogv" type="video/ogg">
        <source src="m/video.mp4" type="video/mp4">
    </video>        
</div>

私は固定メニューを持っていますが、メニューがビデオの上にあるとき、ビデオはz-indexを無視しているように見えます。私は現在、運がないクロームウィンドウに取り組んでいます。何か案は？

4

3 に答える 3

22

重複する両方の要素にcssプロパティを使用し、position:absoluteより高い値を指定しようとします0z-index

これがjsFiddleの動作例です。

css：

#main_container { float: left; position: relative; left:0; top:0; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
         min-width: 100%; z-index: 9997; }​
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
           z-index: 9998; }

html：

<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
 <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</div>

注：コントロールを非アクティブ化するためにoverlay divを使用し、jsFiddleの例のように、ビデオの任意のコンテンツを使用できます。

出典：コマンドで再生するウェブサイトの背景としてのビデオ

于 2012-11-14T22:36:24.230 に答える
2

オーバーレイ/メニュー要素で、次を使用します。

backface-visibility: hidden;

これは私のために働いた。私の推測では、要素で3Dレンダリングがトリガーされ、z-indexの問題が解消されます。

于 2018-05-09T07:54:21.630 に答える
1

オーバーレイもビデオの兄弟である必要があります。ビデオがオーバーレイの子である場合は機能しません。

作品：

<div id="container">
  <div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
  </div><!-- end #overlay -->
  <video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
  </video>
</div><!-- end #container -->

動作しない：

<div id="container">
  <div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
    <video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
      <source src="video.mp4" type="video/mp4">
      <source src="video.webm" type="video/webm">
    </video>
  </div><!-- end #overlay -->
</div><!-- end #container -->

私はこれをChromeで試しただけなので、これが普遍的に当てはまらない場合はお詫びします。

于 2014-01-31T20:16:23.417 に答える