这是一个例子:https://jsfiddle.net/5ahw3tec/
HTML
html body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: 'Noto Sans KR', sans-serif;
list-style: none;
}
a {
text-decoration: none;
}
body {
background: lightgrey;
margin: 0;
}
.container {
background-color: #ffffff;
width: 1280px;
padding: 0;
}
#gnb {
width: 1280px;
height: 80px;
z-index: 100;
position: fixed;
}
#gnb .header-area img {
position: relative;
top: 25px;
left: 80px;
}
#gnb .header-area nav {
position: relative;
width: 930px;
left: 280px;
}
#gnb .header-area ul {
list-style: none;
display: flex;
padding: 0;
}
#gnb .header-area li {
margin-left: 80px;
}
#gnb .header-area li a {
color: #333333;
}
#gnb .header-area li:nth-of-type(1) {
margin-left: 0;
}
#gnb .header-area li a:hover {
color: #18d28b;
text-decoration: none;
}
main {
width: 100%;
height: 800px;
background: pink;
}
<div class="container">
<header id="gnb">
<div class="header-area">
<a href="#">
<img src="somelogo" alt="">
</a>
<nav>
<ul>
<li><a href="#">HELLO</a></li>
<li><a href="#">HELLO</a></li>
<li><a href="#">HELLO</a></li>
<li><a href="#">HELLO</a></li>
</ul>
</nav>
</div>
</header>
<main>
</main>
<footer>
</footer>
</div>
CSS
当我向下滚动时,固定菜单栏(徽标图像和一些列表)位于页面顶部。
但是,有一个问题。 当我应用position:fixed to #gnb(在上面的例子中), 我之前制作的背景颜色(白色)消失了。我不知道究竟是什么问题..
我也希望保持背景颜色的效果。
答案 0 :(得分:3)
为什么背景颜色会消失?
好吧,你将颜色设置为容器元素,没有任何其他规格,子元素继承白色背景(这就是你用粉红色覆盖它的原因!)
将标题设置为#gnb
将background-color: #fff
元素与其父元素分离,因此它没有任何背景颜色,直到您指定一个并且下面元素的颜色可见(粉红色) )。因此,您必须再次手动将颜色设置为白色。
所以Jainam的答案是正确的,只需添加
#gnb
到to_param
答案 1 :(得分:2)
请尝试以下css:
请参阅Fiddle Demo
CSS:
import { Component } from "@angular/core";
import { LoginForm } from "./login/login.component";
import { AdminAccount } from "./admin/admin.component";
import { Routes, RouterModule } from "@angular/router";
import { FileData } from "./filedata/filedata.component";
@Component(
{
selector: "root",
templateUrl: "./app.component.html",
})
export class AppComponent {}
答案 2 :(得分:0)
固定菜单 - 使用margin-top
,top: 0
html body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: 'Noto Sans KR', sans-serif;
list-style: none;
}
a {
text-decoration: none;
}
body {
background: lightgrey;
margin: 0;
}
.container {
background-color: #ffffff;
width: 1280px;
padding: 0;
}
/*new */
header {
background-color: #ffffff;
}
#gnb {
width: 1280px;
height: 80px; /* based on this height */
z-index: 100;
position: fixed;
top: 0; /* new */
}
#gnb .header-area img {
position: relative;
top: 25px;
left: 80px;
}
#gnb .header-area nav {
position: relative;
width: 930px;
left: 280px;
}
#gnb .header-area ul {
list-style: none;
display: flex;
padding: 0;
}
#gnb .header-area li {
margin-left: 80px;
}
#gnb .header-area li a {
color: #333333;
}
#gnb .header-area li:nth-of-type(1) {
margin-left: 0;
}
#gnb .header-area li a:hover {
color: #18d28b;
text-decoration: none;
}
main {
margin-top: 80px;
/* new - based on height given at #gnb */
width: 100%;
height: 800px;
background: pink;
}
&#13;
<div class="container">
<header id="gnb">
<div class="header-area">
<a href="#">
<img src="somelogo" alt="">
</a>
<nav>
<ul>
<li><a href="#">HELLO</a></li>
<li><a href="#">HELLO</a></li>
<li><a href="#">HELLO</a></li>
<li><a href="#">HELLO</a></li>
</ul>
</nav>
</div>
</header>
<main>
some text
</main>
<footer>
</footer>
</div>
&#13;