denised/gist:5924370

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Testing</title>
<style>
#header {
  position:fixed;
	left:0; right:0; top:0;
	padding: 0 50px;
	background-color: #F0F0E8;
	z-index:2;
}

#mainbody {
	position: absolute;
	top: 150px;
}
</style>
</head>
<body>
	<div id="header">
		<h1>This is a fixed header</h1>
		<p> <a href="#jumptarget1">Go to Jump Target 1</a>.
		<a href="#jumptarget2">Go to Jump Target 2</a>.
	</div>  <!--end header-->
	<div id="mainbody">
		<h2 id="jumptarget1">This is jump target 1</h2>
		<p>The desired behavior is that the jump target appears at the top of this div.</p>
		<p>Instead, the jump target appears at the top of the screen, behind the header.

		<h2 id="jumptarget2">This is jump target 2</h2>
		<p>You need enough text to cause real scrolling to see the issue.</p>
		<p>Hence...</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc odio lectus, tristique vel fringilla at, fermentum in orci. Donec ultrices ligula vitae velit pulvinar bibendum. Praesent lobortis ligula nulla, sit amet faucibus tortor faucibus vel. Nam luctus rutrum nibh, ac consequat sapien venenatis quis. Aliquam id erat ut diam tincidunt sagittis. Donec elementum, est vel tempor varius, leo mi viverra odio, interdum sodales dui diam condimentum tellus. Vestibulum et cursus augue. Nunc id hendrerit tortor. Donec at nunc metus. Nunc lectus augue, luctus ac laoreet vel, adipiscing dictum ipsum. Nunc bibendum mauris sit amet pellentesque iaculis.</p>

		<p>Fusce eget felis ut sapien iaculis condimentum. In venenatis facilisis justo eu dapibus. Nulla nec sapien blandit, accumsan arcu quis, semper enim. Nullam faucibus urna in orci luctus commodo. Suspendisse at interdum urna. Donec aliquet nisi sodales ligula viverra aliquet. Pellentesque consectetur urna eu diam aliquet, sed convallis nibh posuere. Praesent sit amet est vulputate velit pellentesque sollicitudin. In quis sodales risus. Aliquam dui ipsum, posuere at pharetra at, faucibus sed ligula. Aenean nulla dui, aliquam in hendrerit quis, lacinia eu nibh.</p>

		<p>Donec scelerisque nisi id convallis convallis. Aenean at sem ac libero aliquet aliquam. Vestibulum elit turpis, lacinia eu nunc at, lacinia tincidunt nisl. Quisque magna augue, laoreet nec ultricies ut, viverra in neque. Praesent at fermentum turpis, id scelerisque nisl. Nulla rhoncus risus leo, nec congue magna feugiat quis. Pellentesque porttitor, elit tempus aliquam accumsan, lorem turpis rhoncus nibh, ultricies dapibus libero libero eu magna. Curabitur urna nisi, eleifend sed ante at, tincidunt rutrum arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

		<p>Cras luctus pellentesque eros, vel consectetur nisi suscipit eget. Mauris at massa tempus, pharetra felis et, venenatis lectus. Quisque mattis mauris vel massa placerat pulvinar. Vestibulum dolor metus, rhoncus nec ullamcorper id, posuere eget risus. Nulla interdum nunc sed nisl feugiat tempor. Nam eget pharetra nisi, a convallis lorem. Pellentesque interdum malesuada tortor, vel aliquam neque. Sed sapien tortor, feugiat vitae faucibus sit amet, rhoncus pharetra odio. Proin vel velit eu tortor semper fringilla sit amet eget augue. Praesent varius justo diam, porta tincidunt sapien accumsan id. Maecenas vehicula lectus nec erat gravida, non rhoncus felis pellentesque. Etiam urna eros, mattis vel leo sit amet, iaculis mollis ligula. Morbi quis ligula ligula. Nullam sem erat, fringilla quis malesuada feugiat, ullamcorper sit amet magna. Praesent placerat consequat odio at ornare. Donec eu consequat massa, id ultricies massa.</p>

		<p>Nulla malesuada ipsum vel magna vestibulum mattis. Etiam facilisis ante quis odio tempus, ac egestas ipsum convallis. Aenean massa lectus, faucibus eu pulvinar at, tincidunt vitae ipsum. Sed elit erat, sodales at mattis vitae, facilisis et nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nec dignissim est, ac pretium erat. Curabitur eu arcu purus. Sed dictum tempus lacus, elementum fringilla purus. Cras sit amet libero mattis, sollicitudin nulla nec, malesuada sapien. In ac urna id urna dignissim facilisis. Sed lacinia, ipsum feugiat convallis varius, arcu dolor pellentesque magna, at iaculis massa justo non turpis. Phasellus mollis ante a mi posuere, at ornare risus laoreet. Duis ligula enim, tempus id vestibulum in, vehicula in tellus. In nunc metus, interdum vitae dictum ac, luctus in odio. Nam consectetur tincidunt est, sed fermentum est imperdiet vel.</p>

	</div> <!-- end of main body -->
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Testing</title>
	<style>
	#header {
	position:fixed;
	left:0; right:0; top:0;
	padding: 0 50px;
	background-color: #F0F0E8;
	z-index:2;
	}

	#mainbody {
	position: absolute;
	top: 150px;
	}
	</style>
	</head>
	<body>
	<div id="header">
	<h1>This is a fixed header</h1>
	<p> <a href="#jumptarget1">Go to Jump Target 1</a>.
	<a href="#jumptarget2">Go to Jump Target 2</a>.
	</div> <!--end header-->
	<div id="mainbody">
	<h2 id="jumptarget1">This is jump target 1</h2>
	<p>The desired behavior is that the jump target appears at the top of this div.</p>
	<p>Instead, the jump target appears at the top of the screen, behind the header.

	<h2 id="jumptarget2">This is jump target 2</h2>
	<p>You need enough text to cause real scrolling to see the issue.</p>
	<p>Hence...</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc odio lectus, tristique vel fringilla at, fermentum in orci. Donec ultrices ligula vitae velit pulvinar bibendum. Praesent lobortis ligula nulla, sit amet faucibus tortor faucibus vel. Nam luctus rutrum nibh, ac consequat sapien venenatis quis. Aliquam id erat ut diam tincidunt sagittis. Donec elementum, est vel tempor varius, leo mi viverra odio, interdum sodales dui diam condimentum tellus. Vestibulum et cursus augue. Nunc id hendrerit tortor. Donec at nunc metus. Nunc lectus augue, luctus ac laoreet vel, adipiscing dictum ipsum. Nunc bibendum mauris sit amet pellentesque iaculis.</p>

	<p>Fusce eget felis ut sapien iaculis condimentum. In venenatis facilisis justo eu dapibus. Nulla nec sapien blandit, accumsan arcu quis, semper enim. Nullam faucibus urna in orci luctus commodo. Suspendisse at interdum urna. Donec aliquet nisi sodales ligula viverra aliquet. Pellentesque consectetur urna eu diam aliquet, sed convallis nibh posuere. Praesent sit amet est vulputate velit pellentesque sollicitudin. In quis sodales risus. Aliquam dui ipsum, posuere at pharetra at, faucibus sed ligula. Aenean nulla dui, aliquam in hendrerit quis, lacinia eu nibh.</p>

	<p>Donec scelerisque nisi id convallis convallis. Aenean at sem ac libero aliquet aliquam. Vestibulum elit turpis, lacinia eu nunc at, lacinia tincidunt nisl. Quisque magna augue, laoreet nec ultricies ut, viverra in neque. Praesent at fermentum turpis, id scelerisque nisl. Nulla rhoncus risus leo, nec congue magna feugiat quis. Pellentesque porttitor, elit tempus aliquam accumsan, lorem turpis rhoncus nibh, ultricies dapibus libero libero eu magna. Curabitur urna nisi, eleifend sed ante at, tincidunt rutrum arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

	<p>Cras luctus pellentesque eros, vel consectetur nisi suscipit eget. Mauris at massa tempus, pharetra felis et, venenatis lectus. Quisque mattis mauris vel massa placerat pulvinar. Vestibulum dolor metus, rhoncus nec ullamcorper id, posuere eget risus. Nulla interdum nunc sed nisl feugiat tempor. Nam eget pharetra nisi, a convallis lorem. Pellentesque interdum malesuada tortor, vel aliquam neque. Sed sapien tortor, feugiat vitae faucibus sit amet, rhoncus pharetra odio. Proin vel velit eu tortor semper fringilla sit amet eget augue. Praesent varius justo diam, porta tincidunt sapien accumsan id. Maecenas vehicula lectus nec erat gravida, non rhoncus felis pellentesque. Etiam urna eros, mattis vel leo sit amet, iaculis mollis ligula. Morbi quis ligula ligula. Nullam sem erat, fringilla quis malesuada feugiat, ullamcorper sit amet magna. Praesent placerat consequat odio at ornare. Donec eu consequat massa, id ultricies massa.</p>

	<p>Nulla malesuada ipsum vel magna vestibulum mattis. Etiam facilisis ante quis odio tempus, ac egestas ipsum convallis. Aenean massa lectus, faucibus eu pulvinar at, tincidunt vitae ipsum. Sed elit erat, sodales at mattis vitae, facilisis et nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nec dignissim est, ac pretium erat. Curabitur eu arcu purus. Sed dictum tempus lacus, elementum fringilla purus. Cras sit amet libero mattis, sollicitudin nulla nec, malesuada sapien. In ac urna id urna dignissim facilisis. Sed lacinia, ipsum feugiat convallis varius, arcu dolor pellentesque magna, at iaculis massa justo non turpis. Phasellus mollis ante a mi posuere, at ornare risus laoreet. Duis ligula enim, tempus id vestibulum in, vehicula in tellus. In nunc metus, interdum vitae dictum ac, luctus in odio. Nam consectetur tincidunt est, sed fermentum est imperdiet vel.</p>

	</div> <!-- end of main body -->
	</body>
	</html>