Question

尝试在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;
}

Answer 1

尝试将视频包装在div中。这对我很有用：jsfiddle。

#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;
}

CSS FILE

{{1}}

在html和css中添加视频背景上的按钮。 Z指数不起作用

1 个答案: