Position in CSS

[giaibongda]

- Different Position absolute and relative in css? and when i use it? Help me! Thanks.

[L0adOpt1c]

Absolute positioning places something on the page at a fixed position, via the 'top' and 'left' values. Like this:

#objectcalled {
position:absolute;
top: 760px;
left: 40px;
}

Relative positioning places something on the page relative to other elements on the page. Like this:

#objectcalled {
position:relative;
top: 760px;
left: 40px;
}

Hope this helped.

[TFlan]

Above poster has it semi-right..

There are 4 options for the position attribute:

• Fixed
• Static
• Absolute
• Relative

Fixed positioning is a lot like absolute positioning. The position of the element is calculated in the same way as the absolute model - from the sides of the view port. But fixed elements are then fixed in that location, like a watermark. Everything else on the page will then scroll past that element.

Static is the default position for any element on a Web page. If you don't define the position, it will be static and will display on the screen based on where it is in the HTML document and how it would display inside the normal flow of the document.

Absolute tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned.

Relative positioning is basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow. (Relative to it's starting, normal position.)

[j4v3d]

You should try avoid using position absolute. I dont quite like it. But if you have a div that's in the bottom right hand corner and have a few divs within that you could position the outer div relatively and then anything inside you can place position absolute to that out div.

Best way to know when to use it is by playing around with the HTML/CSS and you'll get the gist of it.