Web Development Intensive

The CSS “position” property has three possible values: “static”, “relative”, and “absolute”.

Static is the default value used by the browser if none other is specified in the CSS.  Statically positioned elements are often referred to as “unpositioned” since no special positioning has been applied to them.  Here is an example of a simple page with two boxes, with no special positioning applied:

Relative positioning is used to shift any elements position relative to where it would normally be if it had the default static positioning.  If, for example, we wanted to shift an element over 10 pixels to the right from where it would normally sit on the page, we could give it relative positioning and set the “left” CSS property to be 10px or so.  This would shift it 10 pixels to the right.

Here is an example of an element with relative positioning.  You can see that the yellow box is shifted a few pixels up higher on the page than where it would normally sit.

Absolute positioning allows us to set any element’s position relative to the absolute top-left corner of the browser window.  So if you always wanted an element to sit 20 pixels down, and 30 pixels to the right of the top-left of the browser window, we could give it absolute positioning, and set its “top” property to be “20px”, and its “left” property to “30px”.  This would shift it that exact position relative to the top left of the browser window.

Here is an example of an element with absolute positioning.  Notice that if you resize the window, the red box (the parent element) stays in the center, but the yellow box (the child element) never moves out of position.  Its position is always fixed relative to the top-left of the browser window.

There is one important special case in which absolute positioning is not relative to the top-left of the browser window.  This is when the absolutely positioned element is a child of another positioned parent element.  The parent element can be either absolutely or relatively positioned… it doesn’t matter so long as it has its position set to something other than “static”.  In these cases, the absolutely positioned child element will be positioned relative to the top-left corner of its parent element, not the browser window.

Here is an example of an absolutely positioned child element within a relatively positioned parent element.

For each of these examples, the basic XHTML structure of the page is identical.  It is only the CSS position properties (“position”, “top”, and “left”) which make these pages behave differently.

No related posts.

Tagged: class 4