在下面的代码示例中，导航栏显示在内容下方，看起来很奇怪。我试过搞乱z-index，但这并没有解决它。
<!DOCTYPE html>
<html>
<head>
<title>Actually, it Is Quantum Physics</title>
<meta name="description" content='This website shows the content of the YouTube channel, "Acutally, it is Quantum Physics"'>
<style>
ul.topnav {
position: absolute;
left: 0;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkcyan;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: cyan;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
div#main {
position: absolute;
top: 4%;
left: 0;
width: 100%;
text-align: center;
color: red;
font-size: 1.5em;
}
div#main h1, h2 {
color: red;
font-size: 1.2em;
}
body {
background-image: url("educationAtom.png");
background-repeat: no-repeat;
background-position: center;
background-color: lawngreen;
}
</style>
<meta name="google-site-verification" content="5SHQHazxlRwIwvGIOeWZyrvl1xL8zIW09eaVEH6-0Ag" />
</head>
<body>
<ul class="topnav" id="navbar">
<li><a href="index.htm">Home</a></li>
<li><a href="blog.htm">Blog</a></li>
<li><a href="hiim.htm">How are the Videos Made?</a></li>
<li><a href="watch.htm">Watch the Videos!</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="media()">☰</a>
</li>
</ul>
<div id="main">
<h1><strong><em>ACTUALLY, IT IS QUANTUM PHYSICS</em></strong></h1>
<h1>What is <em>Actually, it is Quantum Physics</em></h1>
Acutally, it is Quantum Physics is a YouTube channel at <a href="https://www.youtube.com/channel/UCkvh22f1Jp7BWEuS0b8HXVw">www.youtube.com</a>. It makes educational videos about, as the name implies, quantum physics, among other things.
<h1>The Mission</h1>
<div id="qoute" style="float: left; color: black; font-size: 0.5em; width: 20%;">I never teach my pupils, I only provide the conditions in which they can learn.<br>
	--Albert Einstein</div>
The mission of Acutally, it is Quantum Physics is to provide young people the education they need to succed. With tools like YouTube, students struggling in school can speed themselves up. Students who are advanced in school can continue learning. YouTube is by no means perfect, but it is the first step torwards better education for all.
<h1>Why do I Care?</h1>
How we educate our next great thinkers is a <em>very</em> important thing. Schools in the United States are not great. Schools are just a teacher telling students things at the right pace for one or two students. Everyone else is either lost because school moves on too fast, or too slow. This is a huge problem. The obvious solution to the problem is a personal tutor to everyone. But we can't do that. It would be insanely expensive, use more than every human on earth, and even if none of those were a problem, not everyone is smart enough to tutor a kid. YouTube is the real easy solution. It's inexpensive, doesn't require many people, and only needs at least one super-smart guy. It is not perfect, but it's the best, <em>current</em> solution we've got. Needless to say, better things are coming in the future, but this is a <em>current</em> solution that works to solve the Education Paradox.
</div>
<script>
function media() {
var x = document.getElementById("navbar");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
了解菜单栏的内容如何？我想帮助将内容置于内容之上，或者将内容向下移动。提前谢谢！
答案 0 :(得分：0)
在课程ul.tapnav{z-index: 10;}和身份div#main{top:18%}中
<!DOCTYPE html>
<html>
<head>
<title>Actually, it Is Quantum Physics</title>
<meta name="description" content='This website shows the content of the YouTube channel, "Acutally, it is Quantum Physics"'>
<style>
ul.topnav {
position: absolute;
left: 0;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 10;
background-color: darkcyan;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: cyan;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
div#main {
position: absolute;
top: 18%;
left: 0;
width: 100%;
text-align: center;
color: red;
font-size: 1.5em;
}
div#main h1, h2 {
font-size: 1.2em;
}
body {
background-image: url("educationAtom.png");
background-repeat: no-repeat;
background-position: center;
background-color: lawngreen;
}
</style>
<meta name="google-site-verification" content="5SHQHazxlRwIwvGIOeWZyrvl1xL8zIW09eaVEH6-0Ag" />
</head>
<body>
<ul class="topnav" id="navbar">
<li><a href="index.htm">Home</a></li>
<li><a href="blog.htm">Blog</a></li>
<li><a href="hiim.htm">How are the Videos Made?</a></li>
<li><a href="watch.htm">Watch the Videos!</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="media()">☰</a>
</li>
</ul>
<div id="main">
<h1><strong><em>ACTUALLY, IT IS QUANTUM PHYSICS</em></strong></h1>
<h1>What is <em>Actually, it is Quantum Physics</em></h1>
Acutally, it is Quantum Physics is a YouTube channel at <a href="https://www.youtube.com/channel/UCkvh22f1Jp7BWEuS0b8HXVw">www.youtube.com</a>. It makes educational videos about, as the name implies, quantum physics, among other things.
<h1>The Mission</h1>
<div id="qoute" style="float: left; color: black; font-size: 0.5em; width: 20%;">I never teach my pupils, I only provide the conditions in which they can learn.<br>
	--Albert Einstein</div>
The mission of Acutally, it is Quantum Physics is to provide young people the education they need to succed. With tools like YouTube, students struggling in school can speed themselves up. Students who are advanced in school can continue learning. YouTube is by no means perfect, but it is the first step torwards better education for all.
<h1>Why do I Care?</h1>
How we educate our next great thinkers is a <em>very</em> important thing. Schools in the United States are not great. Schools are just a teacher telling students things at the right pace for one or two students. Everyone else is either lost because school moves on too fast, or too slow. This is a huge problem. The obvious solution to the problem is a personal tutor to everyone. But we can't do that. It would be insanely expensive, use more than every human on earth, and even if none of those were a problem, not everyone is smart enough to tutor a kid. YouTube is the real easy solution. It's inexpensive, doesn't require many people, and only needs at least one super-smart guy. It is not perfect, but it's the best, <em>current</em> solution we've got. Needless to say, better things are coming in the future, but this is a <em>current</em> solution that works to solve the Education Paradox.
</div>
<script>
function media() {
var x = document.getElementById("navbar");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
答案 1 :(得分：0)
从这里删除4％，10％希望它适用于所有媒体屏幕。 div #main {top：12％;}
<!DOCTYPE html>
<html>
<head>
<title>Actually, it Is Quantum Physics</title>
<meta name="description" content='This website shows the content of the YouTube channel, "Acutally, it is Quantum Physics"'>
<style>
ul.topnav {
position: absolute;
left: 0;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkcyan;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: cyan;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
div#main {
position: absolute;
top: 12%;
left: 0;
width: 100%;
text-align: center;
color: red;
font-size: 1.5em;
}
div#main h1, h2 {
color: red;
font-size: 1.2em;
}
body {
background-image: url("educationAtom.png");
background-repeat: no-repeat;
background-position: center;
background-color: lawngreen;
}
</style>
<meta name="google-site-verification" content="5SHQHazxlRwIwvGIOeWZyrvl1xL8zIW09eaVEH6-0Ag" />
</head>
<body>
<ul class="topnav" id="navbar">
<li><a href="index.htm">Home</a></li>
<li><a href="blog.htm">Blog</a></li>
<li><a href="hiim.htm">How are the Videos Made?</a></li>
<li><a href="watch.htm">Watch the Videos!</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="media()">☰</a>
</li>
</ul>
<div id="main">
<h1><strong><em>ACTUALLY, IT IS QUANTUM PHYSICS</em></strong></h1>
<h1>What is <em>Actually, it is Quantum Physics</em></h1>
Acutally, it is Quantum Physics is a YouTube channel at <a href="https://www.youtube.com/channel/UCkvh22f1Jp7BWEuS0b8HXVw">www.youtube.com</a>. It makes educational videos about, as the name implies, quantum physics, among other things.
<h1>The Mission</h1>
<div id="qoute" style="float: left; color: black; font-size: 0.5em; width: 20%;">I never teach my pupils, I only provide the conditions in which they can learn.<br>
	--Albert Einstein</div>
The mission of Acutally, it is Quantum Physics is to provide young people the education they need to succed. With tools like YouTube, students struggling in school can speed themselves up. Students who are advanced in school can continue learning. YouTube is by no means perfect, but it is the first step torwards better education for all.
<h1>Why do I Care?</h1>
How we educate our next great thinkers is a <em>very</em> important thing. Schools in the United States are not great. Schools are just a teacher telling students things at the right pace for one or two students. Everyone else is either lost because school moves on too fast, or too slow. This is a huge problem. The obvious solution to the problem is a personal tutor to everyone. But we can't do that. It would be insanely expensive, use more than every human on earth, and even if none of those were a problem, not everyone is smart enough to tutor a kid. YouTube is the real easy solution. It's inexpensive, doesn't require many people, and only needs at least one super-smart guy. It is not perfect, but it's the best, <em>current</em> solution we've got. Needless to say, better things are coming in the future, but this is a <em>current</em> solution that works to solve the Education Paradox.
</div>
<script>
function media() {
var x = document.getElementById("navbar");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>