htmlとcssのビデオ背景にボタンを追加します。 Z-インデックスが機能しない

htmlとcssのフルスクリーンビデオ背景にボタンを追加しようとしています。機能していないZ-インデックスは、各要素を別々に試してみると機能します。しかし、彼らはお互いの上に積み重ねません。私は私が気づいていない重要なリンクを見逃しているかもしれません。 htmlとcssのビデオ背景にボタンを追加します。 Z-インデックスが機能しない

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

出典

2016-10-26 Urvi Shah

フルスクリーンビデオ？ユーザーがhtml5ビデオの最大/フルスクリーンボタンをクリックしていますか？ – UltrasoundJelly

また、あなたの 'z-index：1'の後ろに'; 'がないようです – UltrasoundJelly

はただのdivでビデオをラップしてみHTMLとCSSのコードを追加します。これは私のために働いた：jsfiddle。

<!DOCTYPE html> 
    <html> 
    <title>homepage</title> 
    <head> 
    <link type="text/css" rel="stylesheet" href="stylesheet2.css"/> 
    </head> 
     <body> 
     <div id="videowrap"> 
      <video id ="videobg" preload="auto" autoplay="true" lopp="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; 
}

出典

2016-10-26 02:21:10 UltrasoundJelly

htmlとcssのビデオ背景にボタンを追加します。 Z-インデックスが機能しない

答えて

関連する問題