Question

我正试图让图像显示在视频上，但它甚至没有出现在视频下面。左上角有一些空白区域，但图像也没有出现在那里。当我将视频的HTML代码输出时，图像才会显示出来。

<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>

Answer 1

您只能在非静态元素上设置z-index。

试试这个：

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

Answer 2

Dhira是正确的，但你也错过了一个结束视频标签。我在下面的小提琴上添加了

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

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

HTML：视频z-index无效

2 个答案: