Microsoft Techies: CSS Positioning Example

Tuesday, 23 September 2014

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>slide demo</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
	<style>
	#fixedContainer
	{
	background-color: #ddd;
	position: absolute;
	width: 200px;
	height: 100px;
	left: 50%;
	top: 0%;
	margin-left: -100px; /half the width/
	}

	#fixedContainerabsolute
	{
	background-color: #565656;
	position: fixed;
	width: 100px;
	height: 50px;
	left: 10%;
	top: 0%;
	margin-left: -100px; /half the width/
	}
	</style>
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
	</head>
	<body>
	<div id="fixedContainer">
	</div>
	<div id="fixedContainerabsolute">
	</div>
	<div style="height: 1000px; background-color: #bbb;"></div>

	</body>
	</html>

view raw gistfile1.html hosted with ❤ by GitHub