所以我有一個非常簡單的 html,可以將視頻制作為背景視頻和播放的音頻。現在,當我嘗試添加一個按鈕時,它會被創建,但視頻會與它重疊。我該如何解決?我問了我的朋友,他說讓按鈕的 z-index 高于 css 中的視頻,但這并沒有解決問題。
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: 0;
}
#myButton {
width: 300px;
height: 200px;
font-size: 18px;
padding: 10px;
cursor: pointer;
z-index: 2;
}
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doffy</title>
<video autoplay muted loop id="myVideo">
<source src="/images/doffy.mp4" type="video/mp4">
</video>
<button type="button" id="myButton"> New music</button>
<audio id="BackgroundM" hidden="true">
<source src="" type="audio/mp3" id="source">
</audio>
<script src="/main.js"></script>
</head>
<body>
</body>
</html>
uj5u.com熱心網友回復:
z-index 屬性僅適用于定位元素,您應該添加 position: relative 到您的按鈕以使 z-index 作業。
https://www.w3schools.com/cssref/pr_pos_z-index.asp
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/515383.html
標籤:htmlcss
