Tuesday, October 5, 2010

Parent Elements vs Child Elements and How They Effect Positioning

Parent elements are the elements at which contain the element you target. For example, the <html> element is the parent element of <body> element. The then, is considered the child element.

Relative positioning vs Absolute positioning are fairly important Cascading Style Sheet properties which are useful for web 2.0 developers and beyond. Early web markup often used tables to create websites. Position elements have more flexibility than table elements.

Absolute positioning sets an absolute value on the pixel-coordinates, based on the page, at which the targeted element will be rendered. You set the top, left, right, or bottom elements. It is based on the entire length of the page.

Fixed positioning sets an absolute value on the pixel-coordinates, based on the browser. The element will remain in the same spot no matter where you scroll to on the page.

Static positioning is what the browser defaults to. The element will remain static with both the browser and the page.

Relative positioning is a half-way point between absolute and fixed positioning. Relative positioning moves an element in relation to it's parent element. So If I set the relative positioning of "position: relative; top:100px, left: 100px" then the element will be moved 100px down the page, and 100px to the right. You may use negative coordinates, as it will move them in relation to the parent element.

But heed caution with "position: absolute." Don't use it for critical page elements, especially if you want your page to look the same in every monitor resolution and browser.

-Cole Turner.

No comments: