CSS Positioning Properties

OK so we are about to go over some of the positioning properties of CSS.

Now wouldn't it be cool if you could make a point of placing every single item on your page exactly where you want it? Further more -- make that placement identical on every browser your page is viewed in? It looks like the answer is a series of Cascading Style Sheet commands that allow you to denote down to the exact pixel where you want an item to be pinned up on your page.

POSITIONING AN IMAGE
Here's the code I used in my style sheet to place the image at that specific plot point:

img.pos1{
	position: absolute;
	top: 35px;
	left: 170px;
	width: 50px;
	height: 50px;
}

And inside my document i would have the following code:

<img class="pos1" src="filename.gif" />

Here's What's Happening In The Styles

• position:absolute; states that this image will go exactly where I say it will. If there is text or another picture is already there -- TO BAD. This will position itself right over top of it. That is one of the drawbacks to positioning.
• top:35px; left:170px; These are the plot points for the image: 35 pixels down from the top and 170 pixels in from the left.
• width:50px; height:50px; This is the height and width of the image itself.

HERE is an example of how the above positioning code has worked.

Notice how the rings are positioned right where they should be and as I noted that if there is anything already there it will just position itself over the top of it. This can also work to an advantage if you set your positioning right like in this EXAMPLE HERE.

POSITIONING TEXT?
You bet. If you noticed in the first example, there was a yellow box that said to close the window to get back to the tutorial also sat over top of the text.

Style Sheet Information

div.close{
	position: absolute;
	top: 130px; 
	width: 265px; 
	left: 140px; 
	height: 25px; 
	background-color: yellow;
}

Inside My Document...

<div class"close">&nbsp;&nbsp;Close this window to return to the tutorial.</div>

Here's What's Happening In The Styles

• position: absolute; denotes that this division will be placed exactly where you want it placed.
• top:80px; left:400px; is the positioning of the division.
• width:200px; height:25px; denotes the height and width of the division
• background-color: yellow; sets the background colour of the division to yellow

You can be as creative as you want when it comes to positioning information on your web documents.

POISTION RELATIVE...
This is a pretty cool trick as well to use on your web pages. That image that won't sit just right or overlaps the borders on your page. Or that text that won't sit just perfect the way you want it to.

Well I'll show you a few quick examples of how it works.

This is a quick sentence to show you how relative positioning works.

You will notice that there appears to be a double space between how and relative and there is no space between the two words relative and positioning. Well there actually is but the word relative has been positioned 5 pixels from the left relative to where it originally was.

Here is an example of the code

<p>This is a quick sentence to show you how <span style="position:relative; left:5px; ">relative</span> positioning works.</p>

• This is a quick sentence to show you how relative positioning works.
• Above we have right relative positioning.

• This is a quick sentence to show you how relative positioning works.
• Here we have top relative positioning.

• This is a quick sentence to show you how relative positioning works.
• And last of all we have bottom relative positioning.

• This is a quick sentence to show you how relative positioning works.
• We can also do combinations like this, we have left:5px; and bottom:5px; in the positioning.

<img style="position: relative; left:2px;" src="filename.gif" />
See we can move our images 2 pixel from the left of where it was to line it up if we had to.

We can use this on just about anything we want to, just so we can get that image or text aligned just the way we intended it to look.