Html 一页网站，带有软滚动和静态导航栏_Html_Css

Html 一页网站，带有软滚动和静态导航栏

html css

Html 一页网站，带有软滚动和静态导航栏,html,css,Html,Css,你能帮我找到解决办法吗我是一个网站建设的新手，所以有一个定位问题这里是它的css #navigation { position: fixed; top: 10px; left: 5%; right: 5%; width: 90%; color: #4b5dd2; height: 40px; text-align: center; padding-top: 15px; -webkit-box-shadow: 0px 0px 8px 0px #000000; -moz-box-shadow:

你能帮我找到解决办法吗

我是一个网站建设的新手，所以有一个定位问题

这里是它的css

#navigation {
position: fixed;
top: 10px;
left: 5%;
right: 5%;
width: 90%;
color: #4b5dd2;
height: 40px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);

}
#navigation a {
font-size: 20px;
font-family: sans-serif;
padding-left: 20px;
padding-right: 20px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
} 

/*####################################################################################################*/

#page1{
position: inherit ;
top: 70px;
left: 5%;
right: 5%;
width: 90%;
height: 1000px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;    
}

/*####################################################################################################*/

#page2{
position: inherit;
top: 1070px;
left: 5%;
right: 5%;
width: 90%;
height: 1000px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;    
}

你能告诉我正确的属性设置吗

我试图实现导航栏始终位于顶部，而站点本身则在导航栏上方滚动。换句话说，如果导航占屏幕的5%，我希望页面上的信息只占95%

现在，页面似乎在导航之后

谢谢您的帮助。

您必须使用z索引，以便在重叠时能够设置层次结构。将顶部栏的z-index设置为

z-index:10和你的身体z指数：2（请注意，这些是非常任意的，尽管对于所有内容，默认值都是1）
还要注意的是，z-索引不是通用的，它只将自身与位于下方/上方的元素进行比较。即：
<div id="a">
    <div id="b">
        <div id="c">
                content
        </div>
    </div>
</div>
<div id="d">
    content
</div>

尝试一下这个想法
我不确定我是否理解z-index！你能使用我网站上的html吗？谢谢
标记fyi不是用于文字“标题”，而是包括脚本或样式表之类的东西。将所有网站正文内容移动到标记中。我将更新我的帖子，但似乎不起作用：（body_内容应该是数字？导航栏中的链接在哪里？我想做的是一个网站，例如4000px，分为4个分区，每个分区1000px。使用静态栏在这些分区之间导航，静态栏将始终位于顶部。这只是一个非常粗糙的模板，用于向您说明概念，而不是进行网站设计…我认为您只需要谷歌搜索更多，听起来你几乎没有做过谷歌搜索
<head>
 <!-- FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>

    <!-- CSS -->
    <link href="/styles/main_styles.css" rel="stylesheet" type="text/css" media="all" />

    <!-- JavaScript -->
    <script src="/js/jquery/jquery-1.8.0.js"></script>
</head>

<body>
   <div id="container">
       <div id="top_bar">menu item 1 2 3 4 5</div>
       <div id="centering_tool">
           <div id="body">
               <div class="body_content">paragraph 1</div>
               <div class="body_content">paragraph 2</div>
               <div class="body_content">paragraph 3</div>
           </div>
       </div>
   </div>
</body>

#container { widthL100%;}

#top_bar {
    width:500px;
    height:50px;
    background:#000;
    position:fixed;
    z-index:5;
} 

#centering_tool { margin: 0 auto;}

#body {
    width:800px;
    height:1000px;
    z-index:3;
}

.body_content {
    width:100%;
    height:200px;
    background:pink;
    margin-bottom:20px;
}