CSS positioning

Absolute Positioning

Here's an example of how you can position text on a page using CSS. Your text can be placed using Absolute Positioning. This places text at a fixed location. Note that this is relative to your browser's viewable space. Interestingly, tags can be nested. It's starting point 1X1 will start at the upper left corner of it's parent tag.

If one tag has coordinates left=100 top=50, text will start at 100X50. If you nest another tag inside the previous one with coordinates left=10 top=15, then it's text will start 10 pixels left of it's parent tag and 15 pixels below it's parent tag. Note: we're still dealing with absolute positioning here.


Now create this .html page
Here's the code:





Relative Positioning

If you were to start your next line of text at the fifth line down and at the eighth character across then using relative positioning at that point would mean you are at 0X 0Y or top=0 left=0. If you were to give coordinates top=90 and left=100 then you would end up 90 pixels below the fifth line and 100 pixels to the right of the eight character.

Let's choose the font tag. The code for embedded and external positioning is
font {position:relative; left:100px; top:90px"}
and for inline styles is
<font style="position:relative; left:100px; top:90px">


Now create this .html page
Here's the code:

Here are the results:
You will notice a red box with "100X90" in it floating below the five lines of text above it. It's 0x0 starting position is just to the right of the number "8". You can use this with the font tag, P tag and many others.


title

explain


Here's the code:

Here are the results:
your results here


title

explain


Here's the code:

Here are the results:
your results here