HTML5視頻忽視的z-index

所以這是我試過到目前爲止：HTML5視頻忽視的z-index

<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。我目前在沒有運氣的鉻窗戶上工作。有任何想法嗎？

來源

2012-11-14 Waymas

這是故意的：'z-index：-10;'？ – Neps

使用CSS position:absolute屬性重疊，並同時嘗試的元素給值高於0到z-index

Here is working jsFiddle example.

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>

注意：使用覆蓋div取消激活控件，您可以使用視頻中的任何內容，如jsFiddle示例中的內容。

來源：Video as background on a website playing on command

來源

2012-11-14 22:36:24

tnx很棒！ ; D :) – Waymas

我知道這聽起來很瘋狂，但至少在Chrome和iOS Safari上並不總是有效：我發現的唯一解決方案是將視頻標記後的元素放在html中。 – taseenb

此問題不再發生。如果你認爲你面對它，首先檢查其他選項（對於我來說它是背景：在.css中透明） – Lis

疊加也需要視頻的兄弟姐妹。如果視頻是疊加層的子項，它將不起作用。

作品：

<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-31 20:16:23 faber123

HTML5視頻忽視的z-index

回答

相關問題