带有finxed导航栏的图像顶部的HTML / CSS图像

时间:2016-05-18 23:59:04

标签: javascript html css computer-science

我的网页上有固定的导航栏和图片。我想在这张图片的顶部添加另一张图片,但是当我使用" position:relative"和位置:绝对",我滚动,2个图像通过我的导航栏。

有人可以帮忙吗?

如果需要,我可以发布代码。



(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>
---------------------------------------------------------------------------------
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我不确定我是否理解正确,但这似乎只是z-index问题。

尝试在应该位于下方的元素上放置CSS z-index:0,并在应该位于顶部的元素上放置z-index:1

See if this helps