Question

我试图创建一个导航栏，当我向下滚动但是当我放置位置时固定;在文本上，所以他们将向下滚动它们重叠。我不想使用jquery，因为我的教授。这么说。

   <html>
    <head> <title> My Portfolio </title> 
    <link rel="stylesheet" type = "text/css"
    href="stylesheet.css"> </head>
    <body>
    <ul>
    <a href="Index.html"> Home </a>
    <a href="About.html" > ABOUT </a >
    <a href="Projects.html"  >PROJECTS </a >
    <a href="Resume.html" >RESUME </a >
    <a href="Gallery.html" > GALLERY </a >
    <b> </b>
    </body>
    </html>

CSS

body{
background-position:fixed;
background-repeat:repeat-x;
background-color:white;
font-family:Arial;
font-size:20px;
}

a{
color:#1b1b1b;
TEXT-DECORATION: NONE;
position:fixed;
z-index:2;



}
b{
top:0;
height:30px;
width: 100%;
background:white;
text-align:left;
position:fixed;
z-index:1;
}

Answer 1

你在找这种吗？

检查演示。 http://jsbin.com/tafofesi/1/edit

Answer 2

您的代码存在很多问题。首先，<ul>上没有结束标记。有些浏览器会为您添加这些，但您不应指望它。其次，<ul></ul>是一个无序列表，这意味着它需要有列表项（<li></li>）。

另一件事是您将<b>标记视为元素。默认情况下，<b></b>用于将粗体状态应用于文本。

<ul> 
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li><b><a href="#">BOLD LINK</a></b></li>
</ul>

您的主要问题是您已将position: fixed;应用于您的链接，而不应用于其容器。你想要的是每个链接相对于另一个链接（position: relative;）。在菜单中添加一个容器（<ul>），并固定其位置。该容器内的所有元素应相对或静态定位。

请在此处查看此示例：http://jsfiddle.net/7LTqQ/。

滚动顶部导航栏

2 个答案: