gpt4 book ai didi

javascript - 在 html 和 css 中的视频背景上添加按钮。 Z 索引不起作用

转载 作者:行者123 更新时间:2023-11-28 05:24:52 25 4
gpt4 key购买 nike

尝试在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com