2017-02-07 14 views
0

これは、ほとんどの新規開発者にとって非常に混乱する問題であると確信しています。 そしてこの件が以前に尋ねられたのは残念ですが、私は長い間解決策を見つけることができません。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> 

preview pen

私が座るの上部にビデオカバーを配置することが喜んで。ビデオの上にいくつかのコンテンツを追加します。ビデオの位置とスタイル、およびその上のコンテンツに影響を与えずに、ビデオの下にコンテンツを追加し続けることができます。

任意のヘルプが提出されます。ありがとう!

編集:ビデオの下に私は実際にはビデオの下にウェブページを意味します。

+0

http://codepen.io/TunderScripts/pen/mRjvPaをご覧ください。ブラウザの負の値がロジックに応じて問題ない/スタックしないようにするために、0から高いzインデックスを使用してみてください。 –

+0

ありがとう、私は実際にそれを試みた。しかし、あなたの例でも、ビデオの下のコンテンツはありません。私が私の下で意味していたときは、ページの下を意味し、ビデオの下にはありませんでした。申し訳ありません – vadiki44

+0

もう一度確認できますか? http://codepen.io/TunderScripts/pen/mRjvPa –

答えて

0

これが正常に動作するかどうかは不明です。 ビデオの下にもう1つのdivを作成する必要がありました。また、その中にいくつかの内容が含まれていなければなりませんでした。

visibilityをhiddenに設定してdivを追加しました。

その後、私はページの残りの部分で作業を続けることができました。

私は、トピックと改善についてのさらなるコメントをお答えします。

ありがとうございました!

関連する問題