Question

上周我写信询问我正在创建的导航栏。才开始FCC，我很新。

**问题：**导航栏似乎阻止内容和其他元素的方式。注意“这是文本”是如何被阻止的。即使经过大量的复制。

我终于可以使用高亮功能工作的基本导航栏了。但是，该栏现在似乎阻止了文字。我希望导航栏只是位于屏幕顶部，并在用户滚动时向下滚动，以便他们可以随时点击任何按钮。

我在FCC上只完成了HTML，CSS，jQuery和Bootstrap。这些都是非常基础的课程。

这是代码：的 CSS ：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: black;
  /*----Fixes Nav Bar to top---*/
  position: fixed;
  top: 0;
 width: 100%;
  font-family: sans-serif;
}

li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/*--Drop down buttons--*/
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #4CAF50;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000000;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  /*how does right:0; keep text from going off screen?*/
  right: 0;
}

.dropdown-content a {
    color: #FFFFFF;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #4CAF50}

.dropdown:hover .dropdown-content {
    display: block;
}

HTML ：

<div class="container-fluid">
<!----Nav Bar ---->
  <ul>
    <li><a href="#Home">Home</a></li>
    <li class="dropdown" style="float:right"><a href="#About" 
class="dropbtn">About</a>
    <div class="dropdown-content">
      <a href="#">Contact</a>
      <a href="#">日本生活</a>
    </div>
    </li>
    <li><a href="#Resume">Resume</a></li>
    <li><a href="#Projects">Projects</a></li>
  </ul>
<!---End Nav Bar---->
</div>
<!---background images --->

<p> this is text this is text this is text this is text v v this is text v v 
this is text this is text this is text this is text this is text this is 
textthis is textthis is textthis is textthis is textthis is textthis is 
textthis is textthis is textthis is textthis is textthis is textthis is 
textthis is textthis is textthis is textthis is textthis is textthis is text 
</p>

**目标：**当用户滚动时，导航栏需要保留在原位;因此，用户可以在网站上的任何时间点使用导航栏。目标是这样的（https://codepen.io/freeCodeCamp/full/YqLyXB）

我相信这个示例页面可能不仅仅使用HTML，CSS，jquery和bootstrap。但是我不熟悉编码，也不知道我在做什么。目标只是使用我现在所知的语言。

Answer 1

使用CSS样式：

＆＃13;

.navbar {
position: fixed; 
z-index: 99999;
}

＆＃13;

<div class="navbar">
    //your code navbar
</div>

＆＃13;

如何阻止导航栏阻止页面

1 个答案: