kalinchernev/positioning.css

## positioning.css
/*
* static - default
* fixed - scrolls with the page
* absolute - top left is starting point
* relative - same as absolute, but starting from static position; Parent elements remain as they are.
* inherit - not well for older IE
*/

body {
	background: #f6f6f6;
}
#wrapper {
	background: #fff;
	width: 960px;
	margin: auto;
	padding: 20px;
	position: static;
}
/* fixed positioning example */
#floating-tab {
	background: #ccc;
	width: 15px;
	height: 140px;
	color:black;
	position: fixed;
	padding: 10px;
}
#floating-tab span {
	display: block;
}
/* absolute positioning example */
#absolute {
	background: #ccc;
	position: absolute;
	top:0;
	right: 0;
	padding: 20px;
	border:1px solid #000;
}
/* relative positioning example */
#relative {
	background: #ccc;
	position: relative;
	top:100px;
	right: 0;
	padding: 20px;
	border:1px solid #000;
	width: 230px;
}

## positioning.html
<!DOCTYPE html>
<html>
<head>
	<title>Positioning</title>
	<link rel="stylesheet" type="text/css" href="positioning.css">
</head>
<body>
<a href="#"><div id="floating-tab">
	<span>C</span>
	<span>O</span>
	<span>N</span>
	<span>T</span>
	<span>A</span>
	<span>C</span>
	<span>T</span>
</div></a>
<div id="wrapper">
	<div id="relative">Relative top left (DOM stays as it is)</div>
	<p>In odio est ac a et nec quis, eu scelerisque dapibus elementum ac mauris rhoncus, odio dis massa. Augue, porttitor, odio dolor placerat dolor. Elit! Natoque, elementum, elementum nunc ut montes duis urna auctor augue nascetur pulvinar tincidunt sociis? Pid platea pellentesque, purus turpis adipiscing! Sed cras mauris sit, rhoncus nunc. Ut magnis urna dictumst eu facilisis scelerisque mid adipiscing. Pellentesque nec porttitor, aliquet rhoncus augue dignissim porttitor duis rhoncus magna montes! Ac amet eu in rhoncus rhoncus nec duis, pulvinar placerat, turpis porta est, integer lundium tincidunt natoque massa, sed, porttitor ac in turpis, elit, eros, amet a adipiscing! Lectus est augue platea et mauris sagittis. Porttitor, elementum dignissim! Ut tincidunt quis rhoncus montes dis et rhoncus magna aliquam.</p>

	<p>Hac massa eu, facilisis? Mattis scelerisque in. Et! Enim, sed sed scelerisque scelerisque pulvinar, magna auctor placerat, phasellus nunc. Montes in est vel, augue non vel a! Amet magna urna turpis lectus sagittis quis cras diam, sit non pid aenean sagittis, elementum dolor et ridiculus dolor natoque risus, in montes! Turpis ac, sit, etiam adipiscing eros porta cras et, non velit dis purus, enim, ridiculus, vel elit, turpis ridiculus ut sit? Proin lundium montes aliquet et dis integer tempor! Elit ut? Nec porttitor. Quis, a dignissim et pulvinar mus, ultrices velit pid nec aenean, vel, penatibus et odio odio, magna massa aliquet ultrices. Amet arcu duis placerat magna tincidunt, turpis amet egestas scelerisque turpis? Augue dis tristique, augue magna.</p>

	<p>Ac adipiscing nisi lacus amet mattis penatibus. Egestas mattis nunc magnis. Aliquet sed, sed. Vel aliquam rhoncus! In porttitor rhoncus nunc elit elementum? Dignissim tempor auctor massa turpis scelerisque sit magnis duis, ultrices a ac ac lectus nunc sagittis, aliquet sit! Elementum quis, proin a elit adipiscing magnis placerat mid magnis non vel, auctor placerat, penatibus! Massa, dis pellentesque. Nunc ultrices elit lundium magna placerat montes pulvinar. Sit, cras a elementum. Montes duis augue, montes ac est ac duis tempor diam amet natoque, penatibus. Egestas est dis, lacus lectus tincidunt turpis amet turpis aliquam amet lacus, eu, ut odio, urna amet lorem pulvinar proin integer dis natoque, ut integer, vel facilisis auctor a, magnis! Urna proin mid risus in.</p>

	<p>Amet tempor aenean. Non? Lorem duis porta non in penatibus lectus et dictumst dapibus vel, duis urna, elit integer, porttitor augue eros sed, dis. Nunc elementum turpis natoque sociis. Sed in! Penatibus adipiscing porta diam pid turpis? Placerat, urna. Nec hac? Ridiculus in mattis urna auctor cursus ac pulvinar dictumst sagittis sit magna. Aenean lacus? Ut! Magnis odio odio nascetur odio duis elementum eros, lorem ultricies phasellus enim tortor, nascetur ac. Magna magna massa risus magnis, ac ultrices dignissim! Nunc nisi. Amet eu natoque dapibus pellentesque, parturient. Natoque? Cum? Porttitor parturient placerat rhoncus magna, dignissim, nec, vut nascetur ultrices. Augue in, magna lorem, ultricies porttitor! Odio montes dapibus augue lacus et egestas cursus! Proin natoque, enim est augue dolor.</p>

	<p>Ultrices adipiscing, tempor porttitor elit arcu habitasse ut ultrices nunc enim adipiscing, in. Rhoncus nisi! Lorem? Augue phasellus dictumst urna, habitasse odio, in phasellus, purus vel dignissim! Sit, duis tincidunt egestas nisi magna placerat porta ut elementum eros mid rhoncus, auctor in nisi in facilisis egestas augue? Tempor ut tortor! Augue duis, augue dis facilisis! Ridiculus, pulvinar ut elit, habitasse, cursus urna! Velit! Vel adipiscing, rhoncus? Proin nisi aenean enim! Mauris diam, vut lectus tincidunt parturient adipiscing in! Aenean tortor, scelerisque et adipiscing egestas, lectus nunc sit? Elementum rhoncus et pulvinar lacus a, natoque, magna porttitor magna et proin aenean mauris in elementum magna, platea ut tortor magna, ut proin pid? Ac? Integer est? Nisi vut turpis, magna dapibus tincidunt.</p>

	<p>Adipiscing? Et ut habitasse dapibus a augue duis urna, et enim turpis risus, in phasellus odio integer porttitor elementum proin, sed nunc turpis! Sit est! Mus sit turpis dolor ac elit, massa? Ridiculus nec augue ac turpis turpis porttitor ut? Sed ridiculus nisi sed, adipiscing aliquet scelerisque habitasse natoque tristique, mattis adipiscing phasellus habitasse duis, massa porta nunc aliquet, montes placerat, purus porttitor, dis integer ac velit turpis penatibus. Enim penatibus tempor diam egestas turpis elit turpis amet etiam augue habitasse ut egestas, tempor amet ac tortor. Proin pulvinar et magnis eros ultricies et amet, elementum nec! Integer, massa, nec! Nascetur, eu ut, placerat. In enim integer. Augue urna ultrices? Sit. Turpis, pid ultricies augue, urna sit. Nascetur platea.</p>

	<p>Etiam, magna duis quis phasellus eros rhoncus, et vut? Tempor nunc! Dignissim lectus tristique placerat pulvinar porttitor mid lundium lacus. Natoque dis elit! Enim, a, pulvinar pulvinar amet eros? Ultricies proin? Magna magna nunc parturient in augue diam et arcu, cursus, tempor aliquet cras, augue phasellus ultricies, a, in urna? Sociis sed ac velit nunc, lectus, mauris cum integer. Dignissim tortor? Platea aliquet in nec? Scelerisque nisi, aliquet vel et a et turpis vut nisi nunc adipiscing enim integer, arcu pulvinar, in urna nisi egestas! Aliquam et adipiscing rhoncus pulvinar lacus, duis, natoque mus ut odio sed, augue. Parturient, in risus nascetur nec integer augue hac nisi hac sagittis purus porta et duis! Mid tortor amet mus et dictumst.</p>

	<p>Dignissim elementum enim, montes, eros tempor lundium, porttitor enim lectus augue, tincidunt duis, enim cursus. Dolor sed? Porttitor dapibus lundium velit massa mattis? Turpis nunc rhoncus nisi risus nec, lundium, parturient? Nisi diam! Nec! Auctor, cras a, augue, porttitor, est nunc tristique auctor ut. Sit elementum turpis, vel? Magna, velit, ac phasellus enim! Odio lundium! Sed! Tortor turpis, ac etiam et scelerisque! Dignissim adipiscing scelerisque dapibus, turpis mid augue adipiscing integer! Proin scelerisque tincidunt tortor amet pellentesque platea parturient? Vel mauris vel et urna eros sagittis, magnis porttitor ut et. Aliquet mid in odio nec! Pulvinar cursus amet mus enim porttitor tristique tortor? Placerat tortor. Pellentesque, porttitor, turpis nunc! Vut augue platea dolor? Tempor sed amet lacus et ultrices.</p>
	<div id="absolute">Absolute top right</div>
</div>
</body>
</html>
	/*
	* static - default
	* fixed - scrolls with the page
	* absolute - top left is starting point
	* relative - same as absolute, but starting from static position; Parent elements remain as they are.
	* inherit - not well for older IE
	*/

	body {
	background: #f6f6f6;
	}
	#wrapper {
	background: #fff;
	width: 960px;
	margin: auto;
	padding: 20px;
	position: static;
	}
	/* fixed positioning example */
	#floating-tab {
	background: #ccc;
	width: 15px;
	height: 140px;
	color:black;
	position: fixed;
	padding: 10px;
	}
	#floating-tab span {
	display: block;
	}
	/* absolute positioning example */
	#absolute {
	background: #ccc;
	position: absolute;
	top:0;
	right: 0;
	padding: 20px;
	border:1px solid #000;
	}
	/* relative positioning example */
	#relative {
	background: #ccc;
	position: relative;
	top:100px;
	right: 0;
	padding: 20px;
	border:1px solid #000;
	width: 230px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Positioning</title>
	<link rel="stylesheet" type="text/css" href="positioning.css">
	</head>
	<body>
	<a href="#"><div id="floating-tab">
	<span>C</span>
	<span>O</span>
	<span>N</span>
	<span>T</span>
	<span>A</span>
	<span>C</span>
	<span>T</span>
	</div></a>
	<div id="wrapper">
	<div id="relative">Relative top left (DOM stays as it is)</div>
	<p>In odio est ac a et nec quis, eu scelerisque dapibus elementum ac mauris rhoncus, odio dis massa. Augue, porttitor, odio dolor placerat dolor. Elit! Natoque, elementum, elementum nunc ut montes duis urna auctor augue nascetur pulvinar tincidunt sociis? Pid platea pellentesque, purus turpis adipiscing! Sed cras mauris sit, rhoncus nunc. Ut magnis urna dictumst eu facilisis scelerisque mid adipiscing. Pellentesque nec porttitor, aliquet rhoncus augue dignissim porttitor duis rhoncus magna montes! Ac amet eu in rhoncus rhoncus nec duis, pulvinar placerat, turpis porta est, integer lundium tincidunt natoque massa, sed, porttitor ac in turpis, elit, eros, amet a adipiscing! Lectus est augue platea et mauris sagittis. Porttitor, elementum dignissim! Ut tincidunt quis rhoncus montes dis et rhoncus magna aliquam.</p>

	<p>Hac massa eu, facilisis? Mattis scelerisque in. Et! Enim, sed sed scelerisque scelerisque pulvinar, magna auctor placerat, phasellus nunc. Montes in est vel, augue non vel a! Amet magna urna turpis lectus sagittis quis cras diam, sit non pid aenean sagittis, elementum dolor et ridiculus dolor natoque risus, in montes! Turpis ac, sit, etiam adipiscing eros porta cras et, non velit dis purus, enim, ridiculus, vel elit, turpis ridiculus ut sit? Proin lundium montes aliquet et dis integer tempor! Elit ut? Nec porttitor. Quis, a dignissim et pulvinar mus, ultrices velit pid nec aenean, vel, penatibus et odio odio, magna massa aliquet ultrices. Amet arcu duis placerat magna tincidunt, turpis amet egestas scelerisque turpis? Augue dis tristique, augue magna.</p>

	<p>Ac adipiscing nisi lacus amet mattis penatibus. Egestas mattis nunc magnis. Aliquet sed, sed. Vel aliquam rhoncus! In porttitor rhoncus nunc elit elementum? Dignissim tempor auctor massa turpis scelerisque sit magnis duis, ultrices a ac ac lectus nunc sagittis, aliquet sit! Elementum quis, proin a elit adipiscing magnis placerat mid magnis non vel, auctor placerat, penatibus! Massa, dis pellentesque. Nunc ultrices elit lundium magna placerat montes pulvinar. Sit, cras a elementum. Montes duis augue, montes ac est ac duis tempor diam amet natoque, penatibus. Egestas est dis, lacus lectus tincidunt turpis amet turpis aliquam amet lacus, eu, ut odio, urna amet lorem pulvinar proin integer dis natoque, ut integer, vel facilisis auctor a, magnis! Urna proin mid risus in.</p>

	<p>Amet tempor aenean. Non? Lorem duis porta non in penatibus lectus et dictumst dapibus vel, duis urna, elit integer, porttitor augue eros sed, dis. Nunc elementum turpis natoque sociis. Sed in! Penatibus adipiscing porta diam pid turpis? Placerat, urna. Nec hac? Ridiculus in mattis urna auctor cursus ac pulvinar dictumst sagittis sit magna. Aenean lacus? Ut! Magnis odio odio nascetur odio duis elementum eros, lorem ultricies phasellus enim tortor, nascetur ac. Magna magna massa risus magnis, ac ultrices dignissim! Nunc nisi. Amet eu natoque dapibus pellentesque, parturient. Natoque? Cum? Porttitor parturient placerat rhoncus magna, dignissim, nec, vut nascetur ultrices. Augue in, magna lorem, ultricies porttitor! Odio montes dapibus augue lacus et egestas cursus! Proin natoque, enim est augue dolor.</p>

	<p>Ultrices adipiscing, tempor porttitor elit arcu habitasse ut ultrices nunc enim adipiscing, in. Rhoncus nisi! Lorem? Augue phasellus dictumst urna, habitasse odio, in phasellus, purus vel dignissim! Sit, duis tincidunt egestas nisi magna placerat porta ut elementum eros mid rhoncus, auctor in nisi in facilisis egestas augue? Tempor ut tortor! Augue duis, augue dis facilisis! Ridiculus, pulvinar ut elit, habitasse, cursus urna! Velit! Vel adipiscing, rhoncus? Proin nisi aenean enim! Mauris diam, vut lectus tincidunt parturient adipiscing in! Aenean tortor, scelerisque et adipiscing egestas, lectus nunc sit? Elementum rhoncus et pulvinar lacus a, natoque, magna porttitor magna et proin aenean mauris in elementum magna, platea ut tortor magna, ut proin pid? Ac? Integer est? Nisi vut turpis, magna dapibus tincidunt.</p>

	<p>Adipiscing? Et ut habitasse dapibus a augue duis urna, et enim turpis risus, in phasellus odio integer porttitor elementum proin, sed nunc turpis! Sit est! Mus sit turpis dolor ac elit, massa? Ridiculus nec augue ac turpis turpis porttitor ut? Sed ridiculus nisi sed, adipiscing aliquet scelerisque habitasse natoque tristique, mattis adipiscing phasellus habitasse duis, massa porta nunc aliquet, montes placerat, purus porttitor, dis integer ac velit turpis penatibus. Enim penatibus tempor diam egestas turpis elit turpis amet etiam augue habitasse ut egestas, tempor amet ac tortor. Proin pulvinar et magnis eros ultricies et amet, elementum nec! Integer, massa, nec! Nascetur, eu ut, placerat. In enim integer. Augue urna ultrices? Sit. Turpis, pid ultricies augue, urna sit. Nascetur platea.</p>

	<p>Etiam, magna duis quis phasellus eros rhoncus, et vut? Tempor nunc! Dignissim lectus tristique placerat pulvinar porttitor mid lundium lacus. Natoque dis elit! Enim, a, pulvinar pulvinar amet eros? Ultricies proin? Magna magna nunc parturient in augue diam et arcu, cursus, tempor aliquet cras, augue phasellus ultricies, a, in urna? Sociis sed ac velit nunc, lectus, mauris cum integer. Dignissim tortor? Platea aliquet in nec? Scelerisque nisi, aliquet vel et a et turpis vut nisi nunc adipiscing enim integer, arcu pulvinar, in urna nisi egestas! Aliquam et adipiscing rhoncus pulvinar lacus, duis, natoque mus ut odio sed, augue. Parturient, in risus nascetur nec integer augue hac nisi hac sagittis purus porta et duis! Mid tortor amet mus et dictumst.</p>

	<p>Dignissim elementum enim, montes, eros tempor lundium, porttitor enim lectus augue, tincidunt duis, enim cursus. Dolor sed? Porttitor dapibus lundium velit massa mattis? Turpis nunc rhoncus nisi risus nec, lundium, parturient? Nisi diam! Nec! Auctor, cras a, augue, porttitor, est nunc tristique auctor ut. Sit elementum turpis, vel? Magna, velit, ac phasellus enim! Odio lundium! Sed! Tortor turpis, ac etiam et scelerisque! Dignissim adipiscing scelerisque dapibus, turpis mid augue adipiscing integer! Proin scelerisque tincidunt tortor amet pellentesque platea parturient? Vel mauris vel et urna eros sagittis, magnis porttitor ut et. Aliquet mid in odio nec! Pulvinar cursus amet mus enim porttitor tristique tortor? Placerat tortor. Pellentesque, porttitor, turpis nunc! Vut augue platea dolor? Tempor sed amet lacus et ultrices.</p>
	<div id="absolute">Absolute top right</div>
	</div>
	</body>
	</html>