你能帮我找到解决方案吗?
我是网站建设的新手,所以在定位方面有麻烦。
这将是我的网站
这是它的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 索引设置为类似于 z-index: 10;
和正文z-index:2;
(请注意,这些 #s 非常随意,默认值为 1,尽管所有内容都默认为 1)。
另请注意,z-index不是通用的,它将自己与仅在下方/上方的元素进行比较。即:
<div id="a">
<div id="b">
<div id="c">
content
</div>
</div>
</div>
<div id="d">
content
</div>
如果将 z 索引指定给 c,它将不会与 d 上的 z 索引信息交互,因为它们不"相关"。AND,如果您希望 C 的 z 索引与 a 和 b 的 z 索引相关,则必须为 a 和 b 定义它们。
下面是一个示例
.HTML
<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>
.CSS
#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;
}
试试这个来得到一个想法