position:absolute; and position:relative;
In web design, Cascading style sheets allow web designers to have the freedom to format how the website will look like without having to tweak with html which is supposed to hold the information together.
I always have some confusions about the positioning aspect of CSS. Finally I understand what CSS position:absolute and CSS position:relative; are all about.
If you are using position:absolute; to position an element, the element being positioned will be referenced to the top left corner of your browser window. This means that what is showing up fine in your computer A may not show up correctly in computer B because computer B’s browser window top left coordinates may be different to computer A.
Able to understand this? It means both computers’ display are not the same to be really dummy about it. Therefore, your element maybe be out of position in computer B or computer C and so on.
Initially I thought this was due to the way Firefox, Opera, IE having different CSS “temperaments”. So idiotic of me to even think of that! It’s all due to the positioning.
The solution is simple.
I just inserted this line position:relative; to the referencing element for the element that is to be positioned. With this line in, position:absolute;will be referenced to the referencing element! So irregardless of the browser windows, the element will be positioned nicely and it won’t go out of place.
I love cascading style sheets.
Technorati Tags: CSS, web design, cascading style sheets