CSS: Fixed positioning

There are four different types of positions that can be used in CSS. They are: static, absolute, relative, and fixed. We will be going over how to use the fixed position.

This lesson can be completed in 10 minutes or less. 
You will need:
	An image to be placed in a fixed position
	A simple text formatting program

1. open a new document in your chosen text program. I will be using text edit. Be sure that you are working in plain text mode.

2.	Begin by putting in the basic html information.
			insert image1

3. 	Type in your image source information. I have named my image fixed, for fixed position. It is a png file because I want it to retain its transparency.
			insert image2

4.	Insert the following code in the head of your webpage code:

	<style type="text/css">	
		div#one 
	{ 
		position:fixed; 
		bottom:0px; 
		left:0px;
		right:0px;
		top:0px;
	}
	</style>

	Bottom, top, left, and right can be used to position your image. I have left all four at zero here so that it can be edited to your needs by you. The numbers you put next to each will determine how far it is offset from that area. Should you put 30 pixels next to 'right', the image will be indented 30 pixels from the right edge of your browser. The numbers you put in will determine where your image is fixed.

5.	The code you just inserted tells nothing to be fixed. We need to tell the code what it is we want to be fixed. We want to fix our image. This code will need to be inserted around your image code so it knows what to fix:

	<div id="one">
	</div>

Once in the code it should look like this:
		insert image3

6.	Save and test in browser. It should look like this:
		insert image4 and image5


Congratulations! You now know how to make an image have a fixed position. Have fun creating wicked awesome webpages!

One can use the same coding for text as well.