CSS Positioning
Element positioning is now part of the CSS2 standard, but started life as a supplement to CSS1. Positioning an element is placing it at some location in the current positioning context.
You can think of a positioning context as a two-dimensional rectangular space with the origin at the top left, with X-coordinates increasing towards the right, and Y-coordinates increasing towards the bottom. The default positioning context is the whole browser window or frame, with its origin (the 0,0 coordinate) at the top left of the window. Each time you position an element (using the 'position' attribute), it defines a new positioning context for its child elements.
The element positioning attributes defined in the CSS standard allow you to place an element at precisely the spot you want on the web page (or even off the screen). You can position the element using absolute screen coordinates or coordinates relative to some other element.
Positioning attributes
The CSS positioning attributes are:
- position
- Defines whether an element can be positioned
- left
- Specifies offset distance from the left edge of the current positioning context to the left edge of element
- top
- Specifies offset distance from the top edge of the current positioning context to the top edge of element
- right
- Specifies offset distance from the right edge of the containing positionable element to the right edge of element
- bottom
- Specifies offset distance from the bottom edge of the containing positionable element to the bottom edge of element
- clip
- Defines the portion of the element that is to be visible
- overflow
- Determines what happens when an element's contents exceed its width/height
- z-index
- Defines the stacking order of positionable elements
- visibility
- Determines whether an element is visible or not, but does not affect its layout
Most of these attributes do nothing unless the position attribute has been set to a value other than 'static'.
The 'Position' Attribute
The values commonly used for the position attribute, and which are also widely supported by the browsers, are:
- static. This is the default. The item is not positionable, and maintains its position in normal document flow ( how the content would normally be arranged if the position attribute was not used )
- relative. The element stays in normal document flow. It is positionable relative to its normal position.
- absolute. The element is taken out of normal document flow. It becomes positionable relative to the edges its containing positionable element.
Absolute vs relative positioning
When the position attribute is set to absolute, the element is positioned relative to the origin (top left corner) of the current positioning context. This current positioning context is determined by the innermost containing element whose position attribute is also set to relative or absolute. The code fragment blow might help to explain.
The positioning context for 'middleDiv' is not the top left corner of the 'outerMost' div. Rather it's defined by the mandatory <HTML> element (in simple terms, it's the top left corner of the window). That's because the 'outerDiv' is not a positionable element.
The 'innerDiv' div is a child of the 'middleDiv', a positionable element. So for the 'innerDiv' div, the positioning context is now defined by the 'middleDiv'. If you set the top and left attributes of 'innerDiv' to 0, you will see that it moves to cover 'middleDiv'.
An element positioned with the position attribute set to 'relative' behaves differently. Its positioning origin is where the element would naturally have been in the normal flow of the document.
In the segment above, 'middleDiv' would have its origin at the left end of the line just below the phrase ending "... test", not at the top left corner of the browser window.
When you position an element using the absolute attribute value, the element is taken out of normal document flow. The remaining content moves to fill the space that would have been occupied by the element.
For relative positioning, the element is displaced. The rest of the content will not be re-arranged to cover the space that the element would normally have been occupying.
The following code fragment illustrates the effect of relative and absolute position on a simple span element.
If you view this page in a browser, you will see that the absolutely positioned element is not affected by, and does not affect, the text. The relatively positioned element affects the content flow. Notice how there is a gap between the text in black which is just big enough to fit the relative element. The element itself is displaced as specified in the CSS rules.
Trying changing each element's display property to 'none' to convince yourself that it is the relative element which is disturbing the flow of text. When its display property is set to 'none', it will be removed from the document and the black text will close up. All that happens for the absolute element is that it disappears from view.
Visibility and Display Attributes
I have used the display attribute above to hide/show the span elements, rather than the visibility attribute. When you set the display property of an element to 'none', the element is actually removed from the document flow. On the other hand, setting the visibility to hidden only hides the element, but its space is still reserved in the document flow.
For the relative span element in the code above, you can change the display property line to 'visibility: visible'. The element is visible as before. Now change the 'visible' to 'hidden', and view in your browser again. Notice how the green text disappears from view, but there is still a gap in the black text.
Examples of using positioning
Say you have an element in the content, which could be text, a picture, anything. Suppose you want another element, which again can contain images/text, to be placed at exactly the same position relative to the first element, no matter where the first element is positioned.
One way (I am not claiming it's the easiest or best) of doing this is to use relative and absolute positioning. In this example, I will style a box to always line up with the word "text". The box will be some distance below the word. Here is the code.
Another example is to cut corners out of a rectangular box. In this example, a blue box is displayed with the corners apparently cut out. This example makes use of the four positioning attributes: top, left, right, and bottom. Here is the code.
As you can see, there is very little to explain. The right attribute causes the element to end at the specified distance from the right edge of the containing positionable element - kind of right justification. The bottom attribute causes the element to end the specified distance from the bottom of the containing positionable element. Thus the div with id 'bottomRight' will end at the bottom and right edges of the blue box.
The blue box will move with any document content since its positioning is relative. The corners will move with it since they are child elements of the box.
Conclusion
There is more to CSS positioning that I haven't covered here, including the z-index, clip, and overflow attributes. If you want a pretty comprehensive treatment of these and dynamic content positioning, you should get your hands on this book, Dynamic HTML: The Definitive Reference
