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，但是您还没有告诉它在哪里 来定位它们。您需要使用top, bottom, left and/or right来放置元素。

与其对每个 individual <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>

请不要忘记，您可能需要调整视频标题等的位置以为链接腾出空间，尤其是在较小的屏幕上。

z-index 不适用于背景视频上的文字

z-index not working for text over background video

css

z-index