HTML：視頻z-index不起作用

我試圖讓圖像顯示在視頻上，但它甚至沒有出現在視頻下。左上角有一些空白區域，但圖像也沒有出現在那裏。只有當我將視頻的HTML代碼發送出去時，圖片纔會顯示出來。HTML：視頻z-index不起作用

<html> 
<style type="text/css"> 
    #sampleVideo { 
     position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; 
    } 

    #sampleImage { 
     z-index: 40; 
    } 

</style> 

<body> 
<video id="sampleVideo" src="sample.mp4" autoplay/> 

<script type="text/javascript"> 
    video = document.getElementById("sampleVideo"); 
</script> 

<img id="sampleImage" src="enter site.png"> 

</body> 
</html>

來源

2014-07-23 stumped

http://stackoverflow.com/questions/13388537/html5-video-ignoring-z-index –

您只能在非靜態元素上設置z-index。

試試這個：

#sampleImage { 
    position: relative; 
    z-index: 40; 
}

來源

2014-07-23 19:32:16 skippr

謝謝！你知道我會如何將圖像放在視頻上嗎？ – stumped

對不起，延遲迴復。如果圖像上的z-index大於視頻的z-index，則圖像應顯示在前面。 – skippr

Dhira是正確的，但你還缺少一個右視頻標籤。我補充說，在下面擺弄

http://jsfiddle.net/SF66f/3/

#sampleImage { 
    position: relative; 
    z-index: 40; 
}

來源

2014-07-23 19:50:48 Ben

HTML：視頻z-index不起作用

回答

相關問題