这可能是一个微不足道的问题，但我目前在显示主要＆gt;时遇到问题。 ul下面的HTML文档的文本＆gt;基于此guide创建的基于图像幻灯片。我的目的是将图像幻灯片放在其余内容之上，这些内容一旦加载就可以向下滚动以访问其余内容。我已经尝试过多个div＆gt; s，flexbox，桌子，位置和避风港能够在搜索SOF时找到我满意的答案。加载后，页面会显示内容，并且图像幻灯片会相互叠加。这是我在HTML和CSS中的第一个项目，并希望在跳转到更多JS之前获得更好的基础。非常感谢任何帮助。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Set properties of navigation header */
.nav {
width: 100%;
height: 3.0rem;
position:fixed;
z-index: 1;
background:rgba(46,105,163,0.7);
}
/* Set navigation bar link color */
nav a {color:#00FFAA;
text-decoration:none;
}
/* Set navigation bar list center horizontal */
nav li {
float:left;
font-size: 1.75em;
display: inline-block;
padding: .25em;
padding-left:.35em;
padding-right:.35em;
color:#00FFAA;}
nav li:hover{
background-color: rgba(7,208,141,0.8);
}
#menu {
float:left;
font-size: 1.75em;
padding:.25em;
width: 2em;
height: 2em;
display:none;
}
/* Homepage Slideshow */
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index:0;
animation: imageAnimation 12s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom:2em;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 12s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
color: rgb(46,105,163);
font-size: 7em;
padding: 0;
line-height:6em;
}
.cb-slideshow li:nth-child(1) span {
background-image: url("/assets/home/lonely_island.jpg")
}
.cb-slideshow li:nth-child(2) span {
background-image: url("/assets/home/iron_giant.jpg");
animation-delay: 6s;
}
.cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
25% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
25% { opacity: 1 }
50% { opacity: 1 }
52% { opacity: 0 }
100% { opacity: 0 }
}
/*Slideshow end */
/* Create the parallax scrolling effect
html {
background-image: url("/assets/home/lonely_island.jpg");
min-height:100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
*/
h1 {
text-align: center;
padding-top:2em;
color:rgb(46,105,163);
font-size:2em;
}
h3{
padding-left: 2em;
padding-right: 2em;
padding-top:0.5em;
}
/*Paragraph Styling*/
p {
padding-left: 5em;
padding-right: 5em;
padding-top:1em;
font-size: 1.25em;
font-family:Calibri;
}
.nav {
color: rgb(0,255,170);
}
/* Mobile site navigation */
@media only screen and (max-width : 650px) {
header {
position:center,fixed;
z-index: 1;
}
#menu {
display:inline-block;
}
nav ul, nav:active ul {
display:none;
position:absolute;
background: rgba(46,105,163,0.7);
top:3em;
width: 7em;
}
body{
z-index: 2000
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width:100%;
padding:.25em;
font-size: 1.5em;
}
/* Text styling for mobile layout */
a:link {
color: rgb(0,255,170);
background-color: transparent;
text-decoration: none;
}
a:visited {
color: rgb(0,255,170);
background-color: transparent;
text-decoration: none;
}
a:hover {
color: rgb(0,255,170);
background-color: transparent;
text-decoration: underline;
}
a:active {
color: rgb(0,255,170);
background-color: transparent;
text-decoration: underline;
}
/*Paragraph Styling for mobile*/
p {
padding-left: 2em;
padding-right: 2em;
padding-top:0.5em;
font-size: 1em;
font-family:Calibri;
}
h3 {
padding-left: 2em;
padding-right: 2em;
padding-top:0.5em;
font-size: 1em;
font-family:Calibri;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
color: rgb(46,105,163);
font-size: 5em;
padding: 0;
line-height:5.5em;
}<header class="nav">
<nav>
<a id="menu">T^T</a>
<ul>
<li><a href="/pages/home.html" id="home">T^T</a></li>
<li><a href="/pages/about.html" id="about">About</a></li>
<li><a href="/pages/blog.html" id="blog">Blog</a></li>
<li><a href="/pages/photos.html" id="photos">Photos</a></li>
<li><a href="/pages/resume.pdf" id="resume">Resume</a></li>
<li><a href="/pages/contact.html" id="contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div class="cb-slideshow">
<ul>
<li>
<span>Image 01</span>
<div>
<h3>Welcome.</h3>
</div>
</li>
<li><span>Image 02</span>
<div>
<h3>Bonjour.</h3>
</div></li>
</ul>
</div>
<h1>Welcome.</h1>
<h3></h3>
<article class="blogP">
<header>
<h2>Title</h2>
<p>description</p>
<time class="publishedOn" datetime="2017-11-27">November 27, 2017</time>
<a class="author" href="/pages/about.html">
<p></p>
<img src="/assets/about/auth.png">
</a>
</header>
<a class="coverImage" href="#">
<img src="/assets/blog/coverImages">
</a>
<p>Written article introduction</p>
</article>
<article class="album">
<h3>
<a href="#">Sample Album</a>
</h3>
<time class="publishedOn" datetime="2017-11-27">November 27, 2017</time>
<a class="author" href="/pages/about.html">
<img src="/assets/about/auth.png">
</a>
<a class="albumImage" href="#">
<img src="/assets/photos/coverImages">
</a>
</article>
</main>
<footer>
<ul class="social">
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Flickr</li>
</ul>
</footer>