我正在尝试制作一个顶部有导航栏和打开标题的网站。然而，每当我测试代码时，只有一个<div>元素出现；另一个不见了。有人知道为什么吗？我希望我的网站类似于npm的网站，在顶部有一个导航栏和一个大的彩色标题。
这是我迄今为止的代码：
/* Declare some variables for CSS */
:root {
/* Website fonts */
/* Titles */ --poppins: "Poppins", sans-serif;
/* Normal text */ --source-sans-pro: "Source Sans Pro", sans-serif;
/* Colors */
/* A nice, warm(ish) yellow | Turbo Yellow */
--yellow: 255, 225, 0;
/* A deep, near-black grey | Cod Grey */
--grey: 23, 23, 23;
/* A dark, sharp violet | Electric Violet */
--violet: 170, 0, 200;
/* A deep, pinkish red | Monza Red */
--red: 189, 0, 57;
/* some constant variables */
--animation-speed: 5s
}
html, body {
display: block;
flex-direction: column;
}
/* Basic text setup */
p.text {
/* Don't have the text all the way to the left */
margin: 40px;
/* Set a good font */
font-family: var(--source-sans-pro);
/* Align text to center */
text-align: center;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ANIMATED BACKGROUND */
/* Opening divider */
.opener {
/* Align it properly */
height: 100%;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
/* Gradient background, slightly darkened */
background: linear-gradient(55deg, rgba(var(--red), 0.9), rgba(var(--violet), 0.9));
/* Make sue to cover the whole page */
background-size: 200% 100%;
/* Set a background color */
background-color: var(--grey);
/* Make text in this divider white -- contrasts nicely with background */
color: white;
/* Animate the gradient! */
-webkit-animation: background var(--animation-speed) ease infinite;
-moz-animation: background var(--animation-speed) ease infinite;
-o-animation: background var(--animation-speed) ease infinite;
animation: background var(--animation-speed) ease infinite;
}
/* Gradient animation, Webkit */
@-webkit-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation, Mozilla */
@-moz-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation, Opera */
@-o-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation */
@keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ------------------------------------------------------------------------------------------------------ */
/* Headings & titles */
.heading {
/* Align heading to center */
text-align: center;
/* Set a good font */
font-family: var(--poppins);
/* Make it BIG! */
font-size: 550%;
/* Make sure it's not too light */
opacity: 100%;
}
/* ------------------------------------------------------------------------------------------------------ */
/* NAVIGATION BAR */
/* Naviigation bar background */
.nav-bar {
background-color: var(--grey);
overflow: hidden;
}
/* Navigation bar buttons */
.nav-bar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Navigation bar hover stylization */
.nav-bar a :hover {
background-color: var(--grey);
color: white;
}<!DOCTYPE html> <html leng = "en">
<!-- If you're seeing this, hello! Here, you can see the inner workings of my website. -->
<head>
<!------------------------------------------------------------------------------------------------------>
<!-- Website title -->
<title> Website! </title>
<!------------------------------------------------------------------------------------------------------>
<!-- All imports here -->
<!-- Cool fonts from Google Fonts -->
<link rel = "preconnect"
href = "https://fonts.gstatic.com">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&family=Source+Sans+Pro:ital,wght@0,600;1,600&display=swap">
<!-- CSS Stylesheet -->
<link rel = "stylesheet"
type = "text/css"
href = "styles.css"
media = "screen"/>
<!------------------------------------------------------------------------------------------------------>
<!-- Encoding -->
<meta charset = "utf-8">
</head>
<!-- All the text -->
<body>
<div class = "nav-bar"
id = "nav-bar">
<a #home
class = "active"> Home </a>
<a #projects> Projects </a>
<a #about-me> About Me </a>
<a #media> Media </a>
<a href = "javascript:void(0);"
class = "icon"
onclick = "selection()"> <i class = "fa fa-bars"> </i> </a>
</div>
<div class = "opener">
<h1 class = "heading"> Site Title </h1>
<p class = "text"> Some text goes here... </p>
<p class = "text"> Some more text here... </p>
</div>
</body>当您完全定位.opener元素时，它会弹到屏幕边缘，覆盖您的导航：
/* Declare some variables for CSS */
:root {
/* Website fonts */
/* Titles */ --poppins: "Poppins", sans-serif;
/* Normal text */ --source-sans-pro: "Source Sans Pro", sans-serif;
/* Colors */
/* A nice, warm(ish) yellow | Turbo Yellow */
--yellow: 255, 225, 0;
/* A deep, near-black grey | Cod Grey */
--grey: 23, 23, 23;
/* A dark, sharp violet | Electric Violet */
--violet: 170, 0, 200;
/* A deep, pinkish red | Monza Red */
--red: 189, 0, 57;
/* some constant variables */
--animation-speed: 5s
}
html, body {
display: block;
flex-direction: column;
}
/* Basic text setup */
p.text {
/* Don't have the text all the way to the left */
margin: 40px;
/* Set a good font */
font-family: var(--source-sans-pro);
/* Align text to center */
text-align: center;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ANIMATED BACKGROUND */
/* Opening divider */
.opener {
/* Align it properly */
height: 100%;
/* position: absolute; */
top: 0px;
right: 0px;
left: 0px;
/* Gradient background, slightly darkened */
background: linear-gradient(55deg, rgba(var(--red), 0.9), rgba(var(--violet), 0.9));
/* Make sue to cover the whole page */
background-size: 200% 100%;
/* Set a background color */
background-color: var(--grey);
/* Make text in this divider white -- contrasts nicely with background */
color: white;
/* Animate the gradient! */
-webkit-animation: background var(--animation-speed) ease infinite;
-moz-animation: background var(--animation-speed) ease infinite;
-o-animation: background var(--animation-speed) ease infinite;
animation: background var(--animation-speed) ease infinite;
}
/* Gradient animation, Webkit */
@-webkit-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation, Mozilla */
@-moz-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation, Opera */
@-o-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation */
@keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ------------------------------------------------------------------------------------------------------ */
/* Headings & titles */
.heading {
/* Align heading to center */
text-align: center;
/* Set a good font */
font-family: var(--poppins);
/* Make it BIG! */
font-size: 550%;
/* Make sure it's not too light */
opacity: 100%;
}
/* ------------------------------------------------------------------------------------------------------ */
/* NAVIGATION BAR */
/* Naviigation bar background */
.nav-bar {
background-color: var(--grey);
overflow: hidden;
}
/* Navigation bar buttons */
.nav-bar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Navigation bar hover stylization */
.topnav a :hover {
background-color: var(--grey);
color: white;
}<!DOCTYPE html> <html leng = "en">
<!-- If you're seeing this, hello! Here, you can see the inner workings of my website. -->
<head>
<!------------------------------------------------------------------------------------------------------>
<!-- Website title -->
<title> Website! </title>
<!------------------------------------------------------------------------------------------------------>
<!-- All imports here -->
<!-- Cool fonts from Google Fonts -->
<link rel = "preconnect"
href = "https://fonts.gstatic.com">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&family=Source+Sans+Pro:ital,wght@0,600;1,600&display=swap">
<!-- CSS Stylesheet -->
<link rel = "stylesheet"
type = "text/css"
href = "styles.css"
media = "screen"/>
<!------------------------------------------------------------------------------------------------------>
<!-- Encoding -->
<meta charset = "utf-8">
</head>
<!-- All the text -->
<body>
<div class = "nav-bar"
id = "nav-bar">
<a #home
class = "active"> Home </a>
<a #projects> Projects </a>
<a #about-me> About Me </a>
<a #media> Media </a>
<a href = "javascript:void(0);"
class = "icon"
onclick = "selection()"> <i class = "fa fa-bars"> </i> </a>
</div>
<div class = "opener">
<h1 class = "heading"> Site Title </h1>
<p class = "text"> Some text goes here... </p>
<p class = "text"> Some more text here... </p>
</div>
</body>不过，我猜你希望导航条浮动在.opener的顶部，这样你就可以将其设为position: relative，并将其设置为正z-index:
/* Declare some variables for CSS */
:root {
/* Website fonts */
/* Titles */ --poppins: "Poppins", sans-serif;
/* Normal text */ --source-sans-pro: "Source Sans Pro", sans-serif;
/* Colors */
/* A nice, warm(ish) yellow | Turbo Yellow */
--yellow: 255, 225, 0;
/* A deep, near-black grey | Cod Grey */
--grey: 23, 23, 23;
/* A dark, sharp violet | Electric Violet */
--violet: 170, 0, 200;
/* A deep, pinkish red | Monza Red */
--red: 189, 0, 57;
/* some constant variables */
--animation-speed: 5s
}
html, body {
display: block;
flex-direction: column;
}
/* Basic text setup */
p.text {
/* Don't have the text all the way to the left */
margin: 40px;
/* Set a good font */
font-family: var(--source-sans-pro);
/* Align text to center */
text-align: center;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ANIMATED BACKGROUND */
/* Opening divider */
.opener {
/* Align it properly */
height: 100%;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
/* Gradient background, slightly darkened */
background: linear-gradient(55deg, rgba(var(--red), 0.9), rgba(var(--violet), 0.9));
/* Make sue to cover the whole page */
background-size: 200% 100%;
/* Set a background color */
background-color: var(--grey);
/* Make text in this divider white -- contrasts nicely with background */
color: white;
/* Animate the gradient! */
-webkit-animation: background var(--animation-speed) ease infinite;
-moz-animation: background var(--animation-speed) ease infinite;
-o-animation: background var(--animation-speed) ease infinite;
animation: background var(--animation-speed) ease infinite;
}
/* Gradient animation, Webkit */
@-webkit-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation, Mozilla */
@-moz-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation, Opera */
@-o-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation */
@keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ------------------------------------------------------------------------------------------------------ */
/* Headings & titles */
.heading {
/* Align heading to center */
text-align: center;
/* Set a good font */
font-family: var(--poppins);
/* Make it BIG! */
font-size: 550%;
/* Make sure it's not too light */
opacity: 100%;
}
/* ------------------------------------------------------------------------------------------------------ */
/* NAVIGATION BAR */
/* Naviigation bar background */
.nav-bar {
background-color: var(--grey);
overflow: hidden;
position: relative;
z-index: 10;
}
/* Navigation bar buttons */
.nav-bar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Navigation bar hover stylization */
.topnav a :hover {
background-color: var(--grey);
color: white;
}<!DOCTYPE html> <html leng = "en">
<!-- If you're seeing this, hello! Here, you can see the inner workings of my website. -->
<head>
<!------------------------------------------------------------------------------------------------------>
<!-- Website title -->
<title> Website! </title>
<!------------------------------------------------------------------------------------------------------>
<!-- All imports here -->
<!-- Cool fonts from Google Fonts -->
<link rel = "preconnect"
href = "https://fonts.gstatic.com">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&family=Source+Sans+Pro:ital,wght@0,600;1,600&display=swap">
<!-- CSS Stylesheet -->
<link rel = "stylesheet"
type = "text/css"
href = "styles.css"
media = "screen"/>
<!------------------------------------------------------------------------------------------------------>
<!-- Encoding -->
<meta charset = "utf-8">
</head>
<!-- All the text -->
<body>
<div class = "nav-bar"
id = "nav-bar">
<a #home
class = "active"> Home </a>
<a #projects> Projects </a>
<a #about-me> About Me </a>
<a #media> Media </a>
<a href = "javascript:void(0);"
class = "icon"
onclick = "selection()"> <i class = "fa fa-bars"> </i> </a>
</div>
<div class = "opener">
<h1 class = "heading"> Site Title </h1>
<p class = "text"> Some text goes here... </p>
<p class = "text"> Some more text here... </p>
</div>
</body>此外，值得一提的是，只要你把导航栏放在网站的顶部，就可以考虑使用<nav>而不是div来改进语义和可访问性。
只需更新您的CSS
.nav-bar{
position: fixed;
z-index: 1
}