CSS POSITION

The property position to position an HTML element anywhere.

There are four ways to position an element:

1.- Static Position:

The default position. The elements are positioned on the page as they appear.

2.- Fixed position:

Places a fixed form element anywhere on the page with reference to the upper left corner.
The item will never move, even if we scroll the page.
It can be useful if you want to maintain fixed part of the screen, for example, the top of the page, so it is always visible but do scroll.

Example element fixed position of "fixed", which will be placed right at the top, with a separation of the upper 40px 10px and the right margin.

<style type="text/css"> .fixed { position:fixed; top:40px; right:10px; } </style> <div class="fixed"> Text fixed position </div>

3.- Relative position:

The position can vary somewhat depending on where an item should appear.

For example, it may be useful for tabular a paragraph, ie further to the right start.

Example of relative position, a paragraph moved a little to the right so that we increase the margin on the left:

<style type="text/css"> p.right { position:relative; left:20px; } </style> <p>Normal position</p> <p class="right"> Text moved to the right </p>

4.- Absolute position :

With the absolute position can place an item anywhere on the page.
Be careful with that overlaps with some other element.

<style type="text/css"> .title { position:absolute; left:50px; top:80px; } </style>