我试图用 html css 创建一个简单的页面，但开始面临导航栏问题。 我在正文中放置了一个带有一些文本的透明框。但是当页面滚动通过时，框会悬停在菜单上方。找到了相关主题“菜单重叠主体”，但没有看到任何可以解决我的问题的内容。 [ DEMO ]
<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;
您还可以学习 z-index 属性并发现它非常有用 w3schools.com
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>关于html - 导航栏(菜单)被正文元素重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50323798/