我正试图从我的标题下面摆脱这个空白空间。我使用position relative和absolute来替换我的div空间。但当我这样做时，我的链接突然停止工作。非常感谢任何帮助。
@keyframes layer2Anim {
0% {
opacity: 0;
}
17% {
opacity: 0;
}
33% {
opacity: 1;
}
50% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes layer3Anim {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
67% {
opacity: 1;
}
87% {
opacity: 1;
}
100% {
opacity: 0;
}
}
html,
body {
overflow-x: none;
background-color: gold;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
}
ul {
text-align: center;
position: relative;
top: -20px;
}
li {
display: inline-block;
color: #fff;
font-size: 1.4em;
font-weight: bold;
font-family: arial rounded mt;
padding: 50px;
}
li a {
color: #fff;
}
li img {
border-radius: 45px;
}
nav {
width: 100%;
height: 150px;
background-color: #b22222;
}
.slideShow {
position: relative;
}
.placeHolder {
width: 100%;
visibility: hidden;
}
.layer1,
.layer2,
.layer3 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
}
.layer1 {
background-image: url(1.jpg);
}
.layer2 {
background-image: url(2.jpg);
animation: layer2Anim 10s infinite;
}
.layer3 {
background-image: url(3.jpg);
animation: layer3Anim 10s infinite;
}
.slideOverlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.slideOverlay p {
position: relative;
font-size: 6vw;
font-family: comic sans ms;
color: #fff;
text-shadow: 3px 3px 6px #000;
text-align: center;
top: 20%
}
/*The about page content is underneath this sentence.*/
.vintage {
width: 100%;
height: 100vh;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
background-position: center center;
position: relative;
top: -50px;
}
.vintage p {
position: relative;
font-size: 6em;
font-family: comic sans ms;
color: #fff;
text-shadow: 3px 3px 6px #000;
text-align: center;
top: 30%
}
#about {
width: 50%;
height: 800px;
margin: 0 auto;
background-color: #eee;
border-radius: 20px 20px 20px 20px;
position: relative;
top: -100px;
padding: 20px;
}
#about h1 {
text-align: center;
position: relative;
top: 80px;
}
#about p {
position: relative;
top: 95px;
font-size: 1.5em;
padding-left: 5px;
padding-right: 20px;
}
footer {
width: 100%;
height: 400px;
background-color: #b22222;
}<nav>
<!--<a href="index.html"><img src="vintagelogo.jpg" width="90px" height="90px"></a>-->
<ul>
<li>
<a href="index.html">
<img src="vintagelogo.jpg" width="90px" height="90px">
</a>
</li>
<li><a href="about.html">ABOUT MCDONALD'S</a>
</li>
<li><a href="classics.html">OUR CLASSICS</a>
</li>
<li><a href="contact.html">CONTACT</a>
</li>
</ul>
</nav>
<div class="vintage">
<p>ABOUT MCDONALD'S
<p>
</div>
<div id="about">
<h1>ABOUT MCDONALD'S</h1>
<p>Well known around the world, we are the biggest fast food chain and we serve millions of customers daily. But it wasn't always like this. McDonald's was first established in 1940 by Richard and Maurice McDonald. A while later a businessman named Ray
Kroc came along and saw lots of opportunity. He bought the chain and from there everything is history! In our many years of existence we've helped millions of children with our delicious happy meals and toys. Let's also not forget about our famous
Ronald McDonald. It's safe to say that we have influenced millions of people's childhoods and continue to do so.
<br>
<br>Our hamburgers are of top quality and we're always looking to add new things to the menu. In the beginning, we had basic foods like hamburgers, fries, and milkshakes. But since then, we've added the famous Big-Mac, the Quarter Pounder with Cheese,
the McChicken, and much more! Through serving high quality meals and giving excellent service we've been able to expand our growth to 119 countries around the world.
</div>
<footer></footer>
答案 0 :(得分：0)
您需要更改.vintage p CSS代码的top值。使其升高不到30％。
.vintage p {
position: relative;
font-size: 6em;
font-family: comic sans ms;
color: #fff;
text-shadow: 3px 3px 6px #000;
text-align: center;
top: 10%
}