1
次のコードサンプルでは、navbarがコンテンツの下に表示され、本当に変わっています。私はz-indexを使いこなそうとしましたが、それで修正されませんでした。 ナビゲーションバーがコンテンツの下に表示されています - 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>メニューバーがコンテンツの下でどのように参照してください？私はそれをコンテンツの上に置くか、コンテンツを動かすのに少し助けてください。前もって感謝します！
あなたが良いでしょう行われた変更の説明。しかし、素晴らしい解決策！ –
私は説明を追加しました – Gowtham