これは、ほとんどの新規開発者にとって非常に混乱する問題であると確信しています。 そしてこの件が以前に尋ねられたのは残念ですが、私は長い間解決策を見つけることができません。Zインデックスと位置プロパティのスペーシング
私はビデオカバーバックグラウンドを作成しようとしていますが、その上にいくつかのdivを配置して、その下にdivを作成し続けます。
ビデオカバーの下で作業を開始したとき、状況が少し複雑になりました。 - 下に表示されても問題はありませんが、マージンなどでスタイリングしたり、
タグを配置すると、上記のビデオカバーのdivに混乱することがあります。
これは私のコードです:
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="header-video" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro-video-poster.jpg?v=1.1.65') 50% bottom no-repeat;">
<video preload="none" poster="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/empty.gif" autoplay loop>
<source src="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro.mp4?v=1.1.65" type="video/mp4">
</video>
</div>
<div class="header-bg js-parallax" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/uploads/2016/04/intro-home.jpg') 50% 0 no-repeat;">
</div>
</div>
<div style="z-index: 100;">
<p>
some text here
</p>
</body>
</html>
私が座るの上部にビデオカバーを配置することが喜んで。ビデオの上にいくつかのコンテンツを追加します。ビデオの位置とスタイル、およびその上のコンテンツに影響を与えずに、ビデオの下にコンテンツを追加し続けることができます。
任意のヘルプが提出されます。ありがとう!
編集:ビデオの下に私は実際にはビデオの下にウェブページを意味します。
http://codepen.io/TunderScripts/pen/mRjvPaをご覧ください。ブラウザの負の値がロジックに応じて問題ない/スタックしないようにするために、0から高いzインデックスを使用してみてください。 –
ありがとう、私は実際にそれを試みた。しかし、あなたの例でも、ビデオの下のコンテンツはありません。私が私の下で意味していたときは、ページの下を意味し、ビデオの下にはありませんでした。申し訳ありません – vadiki44
もう一度確認できますか? http://codepen.io/TunderScripts/pen/mRjvPa –