html - navbar(menu) 被 body 元素覆盖
问题描述
我试图用 html css 创建一个简单的页面,但开始面临导航栏的问题。我在正文中放置了一个带有一些文本的透明框。但是随着页面滚动通过框悬停在菜单上方。找到了一个相关主题“菜单与正文重叠”,但没有看到任何可以解决我的问题的内容。[演示]
<head>
div.box {
margin: 30px;
background-color: #333;
border: 1px solid black;
opacity: 0.6;
font-size: 20px;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.box p {
margin: 5%;
font-weight: normal;
color: #ffffff;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
<div class="navbar" style="display:table;">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
</head>
<body>
<div class="main">
<h1>Fixed Menu</h1>
<p>Some text some text some text some text..</p>
<div class="box">
<h2 style="color:white; text-align:center">Some text some text </h2>
</div>
</div>
</body>
解决方案
设置为nav
z-index: 1;
You Can Also Learn z-index poperty 并哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇 哇
body {margin:0;}
div.box {
margin: 30px;
background-color: #333;
border: 1px solid black;
opacity: 0.6;
font-size: 20px;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.box p {
margin: 5%;
font-weight: normal;
color: #ffffff;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<div class="box">
<h2 style="color:white; text-align:center">Some text some text </h2>
<p>Some text some text Some text some text Some text some text Some text some text... </p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
推荐阅读
- perforce - perforce:有没有办法强制从所有站点恢复所有打开的文件?
- javascript - 加载页面时如何使用 React 更改背景图像?
- visual-studio-code - 当复制和粘贴的列选择行数不同时,VSCode 和 VS2017 的工作方式不同
- html - 对齐按钮图像内的文本和图像
- mysql - MySQL 在安装 MySQL 时询问用户名和密码
- java-8 - 如何使用 Jackson 解析对象遵循 json 类型?
- ruby-on-rails - YADCF Bootstrap Datetimepicker 从容器溢出
- apache - .htaccess 将所有路由重定向到 .html
- microsoft-teams - Azure 机器人服务中的团队频道不起作用
- swiftui - 任何人都可以使用 SwiftUI SignInWithAppleButton 在 tvOS 上工作