固定标题导航链接滚动出标题问题答案

【问题标题】：fixed header nav links scroll out of the header issue固定标题导航链接滚动出标题问题
【发布时间】：2015-10-01 13:21:18
【问题描述】：

我正在努力寻找我的问题的答案，也许我没有很好地解释它。

我有一个带有导航的固定标题，这是 HTML；

<header>
<nav>
    <ul>
        <li><a href="home.html">HOME</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="ourpassion.html">OUR PASSION</a></li>
        <li><a HREF="whatwedo.html">WHAT WE DO</a></li>
        <li><a href="blog.html">BLOG</a></li>
        <li><a href="contact.html">CONTACT</a></li>
    </ul>
</nav>

当我在正文中向下滚动（以查看更多内容）时，链接本身会滚动出视口，而标题及其内容仍然存在。换句话说，标题视觉效果（如链接文本，例如 HOME、ABOUT、CONTACTS 等）仍然存在并给人以链接的印象，但我无法再将鼠标悬停在它们上方，因为标签似乎向上消失了。

我不明白如何解决这个问题。这里是业余程序员。下面附上整个html文件供参考。

非常感谢！内特

<!DOCTYPE html>
<html lamg="en">

<head>
	<link href='https://fonts.googleapis.com/css?family=Bitter|Abril+Fatface|Quattrocento+Sans|Cantarell' rel='stylesheet' type='text/css'>
	<style>
	* {
		overflow-x: hidden; 
		margin: 0;
		padding: 0;
	}

	h1 {
		font-family: "Bitter", serif;
		font-size: 5vw;
	}

	h2 {
		font-family: "Quattrocento Sans", sans-serif;
		font-size: 2vw;
	}

	h3 {
		font-family: "Cantarell", sans-serif;
		font-size: 1.5vw;
	}

	header {
		position: fixed;
		overflow: hidden;
		height: 100px;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.5);
	}

	nav {
		text-align: center;
		position: relative;
	}

	ul {
		line-height: 100px;
		position: relative;
	}

	li {
		position: relative;
		display: inline-block;
		background-color: rgba(200, 200, 200, 0);
		-webkit-transition: width 2s; /*safari */
		transition: background-color 0.2s;
	}

	li:hover {
		position: relative;
		background-color: rgba(200, 200, 200, 0.8);
	}

	a {
		position: relative;
		text-decoration: none;
		text-align: center;
		font-size: 2vw;
		display: block;
		padding-left: 2vw;
		padding-right: 2vw;
		font-family: "Abril Fatface", cursive;
		color: rgba(216, 216, 216, 1); 
		text-shadow: 0px 0px 1px #A0A0A0;
	}

	body {
		background-color: rgba(121, 184, 255, 0.5);
		color: white;
		background-image: url(http://wallpaperspal.com/wp-content/uploads/Blue-Gradient-Abstract-Wallpaper.jpg);
	}

	div.headerspace {
		height: 100px;
	}

	div.mainmedia {
		background-image: url("nate pic.jpg");
		width: 500px;
		height: 500px;
		float: right;
	}

	div.content {
		position: absolute;
		padding-right: 300px;
		padding-left: 100px;
		padding-top: 100px;
	}


	</style>
</head>
<header>
	<nav>
		<ul>
			<li><a href="home.html">HOME</a></li>
			<li><a href="about.html">ABOUT</a></li>
			<li><a href="ourpassion.html">OUR PASSION</a></li>
			<li><a HREF="whatwedo.html">WHAT WE DO</a></li>
			<li><a href="blog.html">BLOG</a></li>
			<li><a href="contact.html">CONTACT</a></li>
		</ul>
	</nav>
</header>

<body>
	<div class="headerspace">
	</div>
	<div class="mainmedia">
	</div>
	<div class="content">
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
	</div>
</body>

【问题讨论】：

需要在body标签内添加

标签： html css hyperlink header fixed

【解决方案1】：

你需要为 header 设置 z-index。

<!DOCTYPE html>
<html lamg="en">

<head>
	<link href='https://fonts.googleapis.com/css?family=Bitter|Abril+Fatface|Quattrocento+Sans|Cantarell' rel='stylesheet' type='text/css'>
	<style>
	* {
		overflow-x: hidden; 
		margin: 0;
		padding: 0;
	}

	h1 {
		font-family: "Bitter", serif;
		font-size: 5vw;
	}

	h2 {
		font-family: "Quattrocento Sans", sans-serif;
		font-size: 2vw;
	}

	h3 {
		font-family: "Cantarell", sans-serif;
		font-size: 1.5vw;
	}

	header {
		position: fixed;
        z-index: 1;
		overflow: hidden;
		height: 100px;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.5);
	}

	nav {
		text-align: center;
		position: relative;
	}

	ul {
		line-height: 100px;
		position: relative;
	}

	li {
		position: relative;
		display: inline-block;
		background-color: rgba(200, 200, 200, 0);
		-webkit-transition: width 2s; /*safari */
		transition: background-color 0.2s;
	}

	li:hover {
		position: relative;
		background-color: rgba(200, 200, 200, 0.8);
	}

	a {
		position: relative;
		text-decoration: none;
		text-align: center;
		font-size: 2vw;
		display: block;
		padding-left: 2vw;
		padding-right: 2vw;
		font-family: "Abril Fatface", cursive;
		color: rgba(216, 216, 216, 1); 
		text-shadow: 0px 0px 1px #A0A0A0;
	}

	body {
		background-color: rgba(121, 184, 255, 0.5);
		color: white;
		background-image: url(http://wallpaperspal.com/wp-content/uploads/Blue-Gradient-Abstract-Wallpaper.jpg);
	}

	div.headerspace {
		height: 100px;
	}

	div.mainmedia {
		background-image: url("nate pic.jpg");
		width: 500px;
		height: 500px;
		float: right;
	}

	div.content {
		position: absolute;
		padding-right: 300px;
		padding-left: 100px;
		padding-top: 100px;
	}


	</style>
</head>
<header>
	<nav>
		<ul>
			<li><a href="home.html">HOME</a></li>
			<li><a href="about.html">ABOUT</a></li>
			<li><a href="ourpassion.html">OUR PASSION</a></li>
			<li><a HREF="whatwedo.html">WHAT WE DO</a></li>
			<li><a href="blog.html">BLOG</a></li>
			<li><a href="contact.html">CONTACT</a></li>
		</ul>
	</nav>
</header>

<body>
	<div class="headerspace">
	</div>
	<div class="mainmedia">
	</div>
	<div class="content">
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
	</div>
</body>

【讨论】：

【解决方案2】：

只需设置标题的 z-index 属性并使其大于内容的 z-index。而且，我添加了一些 jQuery 代码以使标题更明显。

$(document).ready(function(){
	
	$(window).scroll(function(){
		var topOffset = $(window).scrollTop();
		if(topOffset>130){
			$("header").css({"background-color":"rgba(255, 255, 255, 1)"});
		}else{
			$("header").css({"background-color":"rgba(255, 255, 255, .5)"});
			}
	
	
	});
	
	
});

* {
		overflow-x: hidden; 
		margin: 0;
		padding: 0;
	}

	h1 {
		font-family: "Bitter", serif;
		font-size: 5vw;
	}

	h2 {
		font-family: "Quattrocento Sans", sans-serif;
		font-size: 2vw;
	}

	h3 {
		font-family: "Cantarell", sans-serif;
		font-size: 1.5vw;
	}

	header {
		position: fixed;
		overflow: hidden;
		height: 100px;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.5);
		z-index:999;
	}

	nav {
		text-align: center;
		position: relative;
	}

	ul {
		line-height: 100px;
		position: relative;
	}

	li {
		position: relative;
		display: inline-block;
		background-color: rgba(200, 200, 200, 0);
		-webkit-transition: width 2s; /*safari */
		transition: background-color 0.2s;
	}

	li:hover {
		position: relative;
		background-color: rgba(200, 200, 200, 0.8);
	}

	a {
		position: relative;
		text-decoration: none;
		text-align: center;
		font-size: 2vw;
		display: block;
		padding-left: 2vw;
		padding-right: 2vw;
		font-family: "Abril Fatface", cursive;
		color: rgba(216, 216, 216, 1); 
		text-shadow: 0px 0px 1px #A0A0A0;
	}

	body {
		background-color: rgba(121, 184, 255, 0.5);
		color: white;
		background-image: url(http://wallpaperspal.com/wp-content/uploads/Blue-Gradient-Abstract-Wallpaper.jpg);
	}

	div.headerspace {
		height: 100px;
	}

	div.mainmedia {
		background-image: url("nate pic.jpg");
		width: 500px;
		height: 500px;
		float: right;
	}

	div.content {
		position: absolute;
		padding-right: 300px;
		padding-left: 100px;
		padding-top: 100px;
		z-index:500;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Bitter|Abril+Fatface|Quattrocento+Sans|Cantarell' rel='stylesheet' type='text/css'>


<header>
	<nav>
		<ul>
			<li><a href="home.html">HOME</a></li>
			<li><a href="about.html">ABOUT</a></li>
			<li><a href="ourpassion.html">OUR PASSION</a></li>
			<li><a HREF="whatwedo.html">WHAT WE DO</a></li>
			<li><a href="blog.html">BLOG</a></li>
			<li><a href="contact.html">CONTACT</a></li>
		</ul>
	</nav>
</header>
	<div class="headerspace">
	</div>
	<div class="mainmedia">
	</div>
	<div class="content">
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
		<h1>Nat and Abs</h1>
		<h2>A.K.A Nabs</h2>
		<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
	</div>

【讨论】：