的z-index不是文字工作过的背景视频

Question

我发现代码在网上，我复制到让我的网站的标题在一个环形的背景视频。但是，我在屏幕左侧添加链接的工作无效。因为我希望每个人都堆叠在另一个之上，所以我认为flexbox是最好的处理方式，但我甚至不能在没有它的情况下显示链接。我做错了什么，达成目标的最佳方法是什么？

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-index的，其你是不是在定位在首位的视频的链接。

您已经为<p>元素absolute设置了位置，但您还没有告诉它其中需要对它们进行定位。您需要使用顶部，底部，左侧和/或右侧放置元素。

而不是做这为每个<p>元素，其更容易将其全部添加到一个div，然后就立场，即一个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：从.content p取下定位，因为我们将使用div来放置它们

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

3：创建您的CSS规则来定位div，例如

.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>

不要忘记，你可能需要调整视频标题等的位置，以腾出空间的联系，特别是在小屏幕上。