我的网页上有一个固定的导航栏和一张图片。我想在此图片之上添加另一张图片，但是当我使用“position: relative”和 position:absolute”并滚动时，这两张图片会越过我的导航栏。
有人可以帮忙吗？
如果需要，我可以发布代码。
(menueBar.css)
#menu-bar {
font-family: Arial;
font-size: 20px;
}
#name {
color: #ccc;
margin-left: 15px;
margin-top: 15px;
}
#nav{ background-color: #222;
position: fixed;
width: 100%;
height: 133px;
top: 0;
left: 0;
}
#nav-wrapper{ width: 600px;
margin: 0px 0 0 50px;
text-align:left;
}
#nav ul{ list-style-type: none;
padding: 0 0 0 0;
}
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #333; }
#nav ul li a{ color: #CCC;
display: block;
padding: 15px ;
text-decoration: none;
}
------------------------------------------------------------------------------
(main.css)
body {
font-family:arial;
}
h1,h2{
margin-top: 0px;
color:blue;
}
p {
background: #666;
color: white;
padding : 10px;
}
#header-footer {
margin: 66px 0 0 0;
}
----------------------------------------------
(index.html)
<!doctype html>
<html>
<!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<link href="styles/menuBar.css" rel="stylesheet" type="text/css" />
<title>My WebPage</title>
</head>
<div id="menu-bar">
<body>
<div id="nav">
<div id="nav-wrapper">
<div id="name" >
<p1 style="font-size:40px">Manish Saraf</p1>
</div>
<ul>
<li><a href="index.html"><u>Home</u></a></li>
<li><a href="page2.html">Resume</a></li>
<li><a href="page3.html">Projects</a></li>
<li><a href="page4.html">Contact me</a></li>
</ul>
</div>
</div>
</body>
</div>
<!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!--Header-footer~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id ="header-footer" >
<img src="images/header-footer.jpg" id="header-footer" style="width:100%;height:100%;">
<img src="images/me.jpg" id="me" style="width:100px; height:100px; ">
</div>
<!--header-footer~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<h1>My Website</h1>
<h2>This is my homepage</h2>
<p>And all my homepage Content</p>
</html>
--------------------------------------------------
(page2.html)(resume)
<!doctype html>
<html>
<!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<link href="styles/menuBar.css" rel="stylesheet" type="text/css" />
<title>Resume</title>
</head>
<div id="menu-bar">
<body>
<div id="nav">
<div id="nav-wrapper">
<div id="name" >
<p1 style="font-size:40px">Manish Saraf</p1>
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="page2.html"><u>Resume</u></a></li>
<li><a href="page3.html">Projects</a></li>
<li><a href="page4.html">Contact me</a></li>
</ul>
</div>
</div>
</body>
</div>
<!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<h1>Page 2</h1>
<h2>This is my page 2</h2>
<p>And all my page 2 Content</p>
</body>
</html>
---------------------------------------------------------------
(page3.html)(projects)
<!doctype html>
<html>
<!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<link href="styles/menuBar.css" rel="stylesheet" type="text/css" />
<title>Projects</title>
</head>
<div id="menu-bar">
<body>
<div id="nav">
<div id="nav-wrapper">
<div id="name" >
<p1 style="font-size:40px">Manish Saraf</p1>
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="page2.html">Resume</a></li>
<li><a href="page3.html"><u>Projects</u></a></li>
<li><a href="page4.html">Contact me</a></li>
</ul>
</div>
</div>
</body>
</div>
<!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<h1>Page 3</h1>
<h2>This is my page 3</h2>
<p>And all my page 3 Content</p>
</body>
</html>
----------------------------------------------------------------------------
(page4.html)(contact me)
<!doctype html>
<html>
<!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<link href="styles/menuBar.css" rel="stylesheet" type="text/css" />
<title>Contact Me</title>
</head>
<div id="menu-bar">
<body>
<div id="nav">
<div id="nav-wrapper">
<div id="name" >
<p1 style="font-size:40px">Manish Saraf</p1>
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="page2.html">Resume</a></li>
<li><a href="page3.html">Projects</a></li>
<li><a href="page4.html"><u>Contact me</u></a></li>
</ul>
</div>
</div>
</body>
</div>
<!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<h1>Page 4</h1>
<h2>This is my page 4</h2>
<p>And all my page 4 Content</p>
</body>
</html>
---------------------------------------------------------------------------------最佳答案
我不确定我是否理解正确，但这看起来可能只是一个 z-index 问题。
尝试将 CSS z-index:0 放在应该位于下方的元素上，将 z-index:1 放在应该位于顶部的元素上。
关于javascript - 带有固定导航栏的图像顶部的 HTML/CSS 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37311894/