Back to CSS Tips
Preview: what the working site looks like.

This containing element will move up and down with the browsers scrollbar

This box is fixed in position and will stay in one place

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>     
    <div id="container"> 
            <p>This containing element will move up and down with the browsers scrollbar</p>
    <!--container--></div>  
        <div id="box">
            <p>This box is fixed in position and will stay in one place</p>
        <!--end box--></div> 
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	height: 1908px;
	width: 800px;
	margin: 30px 0 20px 20px;
	background: url(Moon_on_Earth_horizon.jpg) no-repeat;
}
	#wrap p {color: #ccc;}
#box {
	height: 200px;
	width: 230px;
	padding: 25px 10px;
	position: fixed;
	top: 50px;
	right: 50px;
	background: #f00;
	opacity: 0.5;
}