CSS Positioning, Example 2

Absolute Positioning

Image in the Flow

If you put an image between text blocks on a page It will affect the position of any text or other elements after it.

<p>If you put an image between text blocks on a page
<img src="cecb2.gif" width="32" height="32" alt="CECB" />
It will affect the position of any text or other elements after it.</p>

Back to Positioning Examples

Image with Positioning

If you put an absolutely positioned image on a page It will not affect the position of any text or other elements after it.

<p>If you put an absolutely positioned image on a page
<img src="cecb2.gif" width="32" height="32" alt="CECB" style="position:absolute; left:200px; top:500px;" />
It will not affect the position of any text or other elements after it.</p>

Back to Positioning Examples

An Image Positioned with Percentages

Instead of length values (20px or 100px) you can use percentages to position an element absolutely on the screen.

You'll find a CECB image at the bottom of the screen half way across. It is positioned with the following code:

<img src="cecb2.gif" width="32" height="32" alt="CECB" style="position:absolute;left:50%; top:100%;" />

Back to Positioning Examples

Jennifer Kyrnin