尝试在 html 和 css 中的全屏视频背景上添加一个按钮。 Z-index 无法正常工作，分别尝试了每个元素，并且它们有效。但它们不会堆叠在一起。我可能错过了一个我不知道的重要链接。 添加 html 和 css 代码
<!DOCTYPE html>
<html>
<title>homepage</title>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet2.css"/>
</head>
<body>
<video id ="videobg" preload="auto" autoplay="true" lopp="loop">
<source src="secret.3gp" > video not supported<video/>
</video>
<div id="button">
<img src= "button.png"/>
</div>
</body>
</html>
CSS FILE
#button{
left: 490px;
top: 560px;
position:fixed;
z-index:1
}
#videobg{
min-width:100%;
min-height:100%;
width: auto;
height:auto;
position:fixed;
z-index:-1;
}
最佳答案
尝试将视频包装在 div 中。这对我有用:jsfiddle 。
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet2.css"/>
<title>homepage</title>
</head>
<body>
<div id="videowrap">
<video id ="videobg" preload="auto" autoplay="true" loop>
<source src="secret.3gp" >
</video>
</div>
<div id="button">
<img src= "button.png"/>
</div>
</body>
</html>
CSS 文件
#button{
left: 490px;
top: 560px;
position:fixed;
z-index:1
}
#videobg{
min-width:100%;
min-height:100%;
width: auto;
height:auto;
position:fixed;
z-index:-1;
}
关于javascript - 在 html 和 css 中的视频背景上添加按钮。 Z 索引不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40251913/