导航条显示在内容下面——z-index不工作
Navigation Bar showing up below content -- z-index not working
在下面的代码示例中，导航条显示在内容下面，看起来很奇怪。我试着改变z指数，但没有解决问题。
<!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>看到内容下面的菜单栏了吗?我希望你能帮我把它放在内容的顶部，或者把内容移下来。提前感谢!
从这里删除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>类别为ul.tapnav{z-index: 10;}, id为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>相关文章：
- 添加java脚本后，Dropdown Menu无法在Index.html上工作
- 当我在Javascript中的.exec(）结果上使用.index时，它是如何工作的
- var numImages = $('.editorials1_on'）.index(）;不工作.有人请
- AngularJS$index在orderBy之后无法正常工作
- CSS z-index/javascript 在三种主要浏览器中的工作方式不同
- AngularJS:$index如何在ng-repeat中工作
- 如何让$index命名变量在角度中工作
- $.ajax工作不正常-返回index.html
- 下拉隐藏在滑块后面.(z-index不工作)
- 当Z-Index不工作时，力元素高于另一个
- Phonegap不能在android模拟器上工作(未找到index.html)
- 美元(文档).当插入到_Layout中时，ready工作.当插入到Index.cshtml时，cshtml::不工作
- 为什么语句是oDiv[i].style.Z-index = arr[i][3];没有# 39;t工作
- 导航条显示在内容下面——z-index不工作
- 反应不工作.错误提示(index):13 Uncaught SyntaxError: Unexpected token
- ng-click中的$index在firefox中工作，而不是在chrome中
- Data-src标签在index.html中工作，但在angular视图中不起作用
- jquery Index(）工作不正常
- HTML Onclick不能与负z-index一起工作
- JQuery动画和z-index不能正常工作
