[英]How to prevent text from overlapping nav bar?
向上滚动时,我的顶部导航栏与下面的文本重叠。 我试过给那些文本框
z-index:2;
和导航z-index:1;
但这并没有解决问题。 有人可以帮忙吗?
<div id = "container">
<div class="header" id="myHeader">
<!-- <h2>My HeaderXXX</h2> -->
<nav>
<ul>
<li><img src="img/nara.png" class="logo" alt="Nara logo"></li>
<li><a class = "active" href = "">Home</a></li>
<li><a href = "district.html">District</a></li>
<li><a href = "resort.html">Resort</a></li>
</ul>
</nav>
</div>
<!-- Main picture -->
<div>
<div class="banner-text">Welcome to Nara legend theme park</div>
<div class="banner-sub-text">Experience authentic Japanese ancient culture</div>
<img src="img/resort-00.jpg" style="width:100%">
</div>
<!-- Script -->
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</div>
这是 CSS:
body
{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: rgb(260, 250, 240, 0.5)
}
.header
{
/*padding: 10px 16px;*/
/*background-color : rgb(85, 85, 85);*/
padding: 10px 10px;
background: rgb(51, 51, 51);
color: #f1f1f1;
}
h2
{
text-align: center;
}
h4
{
text-align: center;
}
.content
{
padding: 16px;
}
.sticky
{
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content
{
padding-top: 102px;
}
nav
{
width : 100%;
height : 50px;
background-color : rgb(51, 51, 51); /* to match `header` color*/
padding-top : 5px;/**/
z-index:1;
}
nav ul
{
list-style-type : none;
margin : 0;
}
nav ul li
{
float : left;
}
nav ul li a
{
font-family : Arial;
font-size : 24px;
font-weight : bold;
text-decoration : none;
display : block;
padding : 10px 12px 10px 12px;
background-color : rgb(51, 51, 51);
color : white;
}
nav ul li a:hover
{
background-color : rgb(120, 120, 120);
}
nav .active
{
background-color : rgb(100, 100, 100);
}
img
{
max-width: 100%;
}
img.logo
{
width: 206px;
height: 48px;
}
* {box-sizing:border-box}
/* Banner text */
.banner-text {
display: flex;
justify-content: center;
color: #f2f2f2;
font-size: 60px;
padding: 150px 12px;
position: absolute;
top: 50;
}
.banner-sub-text {
color: #f2f2f2;
font-size: 20px;
padding: 256px 12px;
position: absolute;
top: 50;
}
尝试将z-index: 2
添加到您的.header
class 中。 您的导航和文本 div 处于不同级别,因此不会比较它们的z-index
,而是使用 header (1) 的 z-index。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.