Question

我在网上找到了我复制的代码，以便通过循环播放的背景视频获取我的网站标题。但是，我在屏幕左侧添加链接的努力无效。由于我希望每个人都堆叠在另一个上面，我认为flexbox是最好的处理方式，但我甚至无法获得没有它的链接。我做错了什么，实现目标的最佳途径是什么？

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 1

问题不在于z-index，而是你首先没有将链接放在视频上。

您已为s[i]+s[i+1]元素<p>设置了排名，但您还没有告诉位置。您需要使用顶部，底部，左侧和/或右侧来放置元素。

不是为每个单独的absolute元素执行此操作，而是更容易将它们全部添加到div中，然后只放置一个div。

1：将链接分组为div以便于定位，例如：

<p>

2：从<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>移除定位，因为我们将使用div来放置它们

.content p

3：创建CSS规则以定位div，例如

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

工作代码段

＆＃13;

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

＆＃13;

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%;
    }

＆＃13;

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

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

1 个答案: