Question

因此，我正在建立我的第一个个人网站，并且我的主页上有一个自动播放的演示文稿（我总共有5个页面，但我刚刚开始从事此工作）。我最近完成了在顶部放置导航栏的操作，并使用table标签将其分隔开，颜色等。

然后我尝试在下面进行演示。我完成了它，当我滚动时，我看到导航栏在演示文稿后面，并且侧面的两个栏填充了它，因此它具有100％的宽度，当我滚动通过演示文稿后，导航栏又回到了文本顶部。

导航栏是固定的，幻灯片和侧面颜色是绝对的。我不知道该怎么做，所以无论滚动多远，导航栏始终会显示在页面顶部。

我无法从html和css中发布代码，因为这篇文章的格式显然很简单，所以我只使用了一些在线文本托管： Link

我将尝试发布HTML代码：

<!-- Here is where the top nav starts -->
<table bgcolor="#C6D9FA" style="width:100%;position:fixed;top:0%;">
<tr>
    <td><a href="Homepage.html"><div id="topnavlinks">Homepage</div></a> 
</td>
    <td><a href="AboutMe.html"><div id="topnavlinks">About Me</div></a> 
</td>
    <td><a href="Portfolio.html"><div id="topnavlinks">Portfolio</div></a> 
</td>
    <td><a href="Extracurriculars.html"><div 
id="topnavlinks">Extracurriculars</div></a></td>
    <td><a href="Contact Me.html"><div id="topnavlinks">Contact Me</div> 
</a> 
</td>
</tr>
</table>
<!-- Here is where the top nav ends -->

<div id="section1background">
<!-- Here is where the autoplaying slideshow starts -->
<div class="slideshow-container">
<div class="mySlides fade"><img src="TrackRun1.jpg" style="width:100%"> 
</div>
<div class="mySlides fade"><img src="Graduation1.jpg" style="width:100%"> 
</div>
<div class="mySlides fade"><img src="HasHeightSmile.jpg" 
style="width:100%"> 
</div>
<div class="mySlides fade"><img src="Lazar.jpg" style="width:100%"></div>
<div class="mySlides fade"><img src="MirrorWarp.jpg" style="width:100%"> 
</div>
<div class="mySlides fade"><img src="SpringTrack2017.jpg" 
style="width:100%"></div>
<div class="mySlides fade"><img src="TrackDinner2018-1.jpg" 
style="width:100%"></div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

这是CSS的代码：

#Title{font-family:Open Sans, sans-serif;
font-size:54px;
color:blue;}

#Text{font-family:Carter One, cursive;
font-size:40px;
color:black;
margin-top:5%;
}

a{text-decoration:none;
font-family:Carter One, cursive;

color:black}

html, body {
margin:0;
padding:0;
}

a:hover { 
  text-decoration:underline;
}

#topnavlinks{font-size:40px;}

/* HEADER COMPLETE */

/* SECTION 1: AUTO-PLAY SLIDESHOW */

* {box-sizing:border-box}

.slideshow-container {
  max-width: 100%;
  position: absolute;
  margin: auto;
  left:25%;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

 #section1background {
      background-color: grey;
      height: 74.3%;
      position: absolute;
      top: 6.9%;
      left: 0;
      width: 100%;
    }

Answer 1

您需要使用z-index始终将其放在顶部使用CSS

table{
 Width: 100%;
 height: 50px;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
}

如何在页面元素的前面和后面保持固定的导航栏

1 个答案: