Question

我的网页包含一个标题和其下方的幻灯片。我的幻灯片图像淡入淡出，它们的高度都为 100vh，并且标题在顶部，它们占用的空间完全超出了页面视图的大小，因此有一个滚动条。我不想要滚动条，我希望所有内容都在同一页面上，所以我在标题上放置了一个绝对位置。这就是问题开始的时候。尽管标题现在位于幻灯片的前面，并且所有内容都在同一个页面视图中，但标题会随着幻灯片淡入淡出。现在，这仅在标题处于绝对或固定位置时才会发生。如果我将位置设置为相对位置，甚至去掉位置，那很好，但不是所有内容都在同一页面上。

这是 HTML：

<header>

  <div class="container header">

    <a href="#"><img class="logo" src="images/logo2.png"></a>

    <nav class="header-nav">

      <ul class="header-navlist">

        <li><a href="">Home</a><li>
        <li><a href="">Works</a><li>
        <li><a href="">About</a><li>
        <li><a href="">Contact</a><li>

      </ul>

    </nav>

  </div>

</header>

<section class="welcome-page">

  <div class="container welcome">

    <h1 class="greeting">Welcome</h1>

  </div>

</section>

<div class="slideshow">

  <div class="slideshow-item one">

  </div>

  <div class="slideshow-item two">

  </div>

  <div class="slideshow-item three">

  </div>

  <div class="slideshow-item four">

  </div>

</div>

这是CSS：

header {
 width: 100%;
 height: 60px;
 background-color: black;
 position: absolute;
}

.container {
 width: 80%;
 margin: auto;
}

.logo {
 height: 54px;
 width: 100px;
 float: left;
 padding-top: 3px;
}

nav {
 text-transform: uppercase;
}

ul {
 list-style: none;
}

a {
 color: white;
 text-decoration: none;
}

nav a:hover {
 /* color: #C0C0C0; */
 font-weight: bold;
}

.header-nav {
 float: right;
}

.header-navlist {
 display: flex;
 position: relative;
}

.header-navlist li {
 padding: 18px 7px 7px 0;
}

.welcome-page {
 width: 100%;
 height: 100vh;
 position: absolute;
}

.welcome {
 height: inherit;
 text-align: center;
}

.greeting {
 color: white;
 font-size: 4em;
 position: relative;
 top: 30%;
}

.slideshow {
 width: 100%;
 height: 100vh;
 position: relative;
 overflow: hidden;
}

.slideshow-item {
 width: inherit;
 height: inherit;
 position: absolute;
 opacity: 0;
 animation: cycleImages 31s infinite;
}

.one {
 background-image: url("images/artwork/image1.jpg");
 background-size: cover;
}

.two {
 background-image: url("images/artwork/image2.jpg");
 background-size: cover;
}

.three {
 background-image: url("images/artwork/image3.jpg");
}

@keyframes cycleImages {
 25% {
   opacity: 1;
 }
 40% {
   opacity: 0;
 }
}

.slideshow-item:nth-child(1) {
 animation-delay: 0s;
}

.slideshow-item:nth-child(2) {
 animation-delay: 10s;
}

.slideshow-item:nth-child(3) {
 animation-delay: 20s;
}

我还希望幻灯片前面出现“欢迎”一词。我想保持静态，所有幻灯片都一样，而不是随着图像淡入淡出。我所做的是创建一个单独的部分，设置为 100vh 的高度，中间有“欢迎”一词。我希望它在幻灯片的前面，所以我将位置设置为绝对位置，但它没有显示。

标题与幻灯片一起消失

0 个答案: