背景の上にテキストのZ-インデックスが機能しませんビデオ

Question

私はループバックされた背景ビデオ上で自分のウェブサイトのタイトルを取得するためにコピーしたオンラインのコードを発見しました。しかし、画面の左側にリンクを追加しようとする私の努力はうまくいきません。私はそれぞれを他のものの上に積み重ねたかったので、私はフレックスボックスが処理する最良の方法だと思っていましたが、リンクなしで表示することさえできません。私は間違って何をしていますか、私の目標を達成する最良の方法は何ですか？

body { 
 
    width: 100%; 
 
    margin: 0 auto 0; 
 
} 
 

 
.video_main { 
 
    margin: 0 auto 0; 
 
    width: 100%; 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 

 
.video_main video { 
 
    /*width: 100%;*/ 
 
    width: 100%px; 
 
    height: auto; 
 
    min-width: 720px; 
 
    margin: 0 auto; 
 
    z-index: -1500; 
 
} 
 

 
.content h1 { 
 
    font-family: "jaf-domus-titling-web", sans-serif; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 48px; 
 
    letter-spacing: 4px; 
 
    z-index: 100; 
 
    position: absolute; 
 
    top: 75px; 
 
} 
 

 
.content h2 { 
 
    font-family: "europa", sans-serif; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    letter-spacing: 6px; 
 
    z-index: 100; 
 
    position: absolute; 
 
    top: 175px; 
 
} 
 

 
.content p { 
 
    display: block; 
 
    font-family: "europa", sans-serif; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 16px; 
 
    z-index: 100; 
 
    position: absolute; 
 
} 
 

 
h1 { 
 
    width: 100%; 
 
} 
 

 
h2 { 
 
    width: 100%; 
 
}

<div class="video_main"> 
 
    <video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload> 
 
    <source src="http://bartonlewisfilm.com/red hook, rush hour (excerpt).mp4" type="video/mp4"> 
 
     </video> 
 
    <div class="content"> 
 
    <h1>Barton Lewis</h1> 
 
    <h2>films about light and the urban landscape</h2> 
 
    <p><a href="index.html" title="home">home</a></p> 
 
    <p><a href="bartons_film_site_works.html" title="works">works</a></p> 
 
    <p><a href="bartons_film_site_bio.html" title="bio">bio</a></p> 
 
    <p><a href="bartons_film_site_cv.html" title="c/v">CV</a></p> 
 
    <p><a href="bartons_film_site_contact.html" title="contact">contact</a></p> 
 
    </div> 
 
</div>

Answer 1

問題は、あなたが最初の場所での映像の上にリンクを配置していないそのことを、Zインデックスではありません。

<p>の要素の位置はabsoluteですが、の場合はの位置にしていません。要素を配置するには、上、下、左および/または右を使用する必要があります。

個々の<p>要素ごとにこれを行うのではなく、それらをすべてdivに追加して、その1つのdivだけを配置する方が簡単です。

1：グループに簡単に位置決めするためのdivにリンク、例えば：

<div class="content"> 
     <h1>Barton Lewis</h1> 
     <h2>films about light and the urban landscape</h2> 
     <div class="videolinks"> 
      <p><a href="index.html" title="home">home</a></p> 
      [etc...] 
     </div> 
    </div> 

2：我々はそれらを配置するためのdivを使用しようとしているので、.content pから位置を削除

.content p { 
    [...] 
    position:absolute; /* <- REMOVE */ 
} 

3： divを配置するCSSルールを作成します。

.content .videolinks{ 
    position:absolute; 
    top:20px; 
    left:20px; 
    z-index:100; 
} 

ワーキングスニペット：

body { 
 
    width: 100%; 
 
    margin: 0 auto 0; 
 
    } 
 
.video_main { 
 
    margin:0 auto 0; 
 
    width:100%; 
 
    height:auto; 
 
    overflow: hidden; 
 
} 
 
.video_main video { 
 
    /*width: 100%;*/ 
 
    width: 100%px; 
 
    height: auto; 
 
    min-width: 720px; 
 
    margin: 0 auto; 
 
    z-index:-1500; 
 
    } 
 
.content h1 { 
 
    font-family: "jaf-domus-titling-web",sans-serif; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 48px; 
 
    letter-spacing: 4px; 
 
    z-index:100; 
 
    position:absolute; 
 
    top:75px; 
 
} 
 
.content h2 { 
 
    font-family: "europa",sans-serif; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    letter-spacing: 6px; 
 
    z-index:100; 
 
    position:absolute; 
 
    top:175px; 
 
    } 
 
.content p { 
 
    font-family: "europa",sans-serif; 
 
    color: white; 
 
    font-size: 16px; 
 
    } 
 
.content .videolinks{ 
 
    position:absolute; 
 
    top:20px; 
 
    left:20px; 
 
    z-index:100; 
 
    } 
 
h1 { 
 
    width: 100%; 
 
    } 
 
h2 { 
 
    width: 100%; 
 
    }

<div class="video_main"> 
 
    <video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload> 
 
<source src="http://bartonlewisfilm.com/red hook, rush hour (excerpt).mp4" type="video/mp4"> 
 
    </video> 
 
    <div class="content"> 
 
     <h1>Barton Lewis</h1> 
 
     <h2>films about light and the urban landscape</h2> 
 
     <div class="videolinks"> 
 
      <p><a href="index.html" title="home">home</a></p> 
 
      <p><a href="bartons_film_site_works.html" title="works">works</a></p> 
 
      <p><a href="bartons_film_site_bio.html" title="bio">bio</a></p> 
 
      <p><a href="bartons_film_site_cv.html" title="c/v">CV</a></p>   
 
      <p><a href="bartons_film_site_contact.html" title="contact">contact</a></p> 
 
     </div> 
 
    </div> 
 
    </div>

あなたはリンクのための部屋を作るためなどを見出し、ビデオの配置を調整する必要がある場合がありますことを忘れないでください、特に小さな画面では