个人中心
gpt4 book ai didi

html - 具有软滚动和静态导航栏的单页网站

转载 作者：行者123 更新时间：2023-11-28 13:07:13 25 4
gpt4 key购买 nike

你能帮我找到解决办法吗？

我是建站新手，定位有点问题。

Here will be my site

这是它的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-index 来让事物在重叠时具有固定的层次结构。将顶部栏的 z-index 设置为 z-index: 10; 和你的 body z-index:2;(注意这些#s 是非常随意的，尽管所有内容的默认值为 1)。

另请注意 z-index 不是通用的，它仅将自身与位于下方/上方的元素进行比较。即:

<div id="a">
    <div id="b">
        <div id="c">
                content
        </div>
    </div>
</div>
<div id="d">
    content
</div>

如果您将 z-index 赋予 c，它不会与 d 上的 z-index 信息交互，因为它们不“相关”。 AND，如果您希望 C 的 z-index 与 a 和 b 的 z-index 相关联，则必须为 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;
}

试试这个来获得灵感

关于html - 具有软滚动和静态导航栏的单页网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19870110/

25 4 0
文章推荐： iOS Swift - segue 到一个类 - 使用 prepareForSegue 将 Int 值从 ViewController 传递到一个类
文章推荐： html - 用作后端模板的html的设计过程
文章推荐： javascript - 我可以一键设置状态并调用函数吗？
文章推荐： javascript - 我正在尝试为 JQuery slider 中的 DIV 设置动画
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com