By: Nigel Peck

June 27th, 2008

Reader Rating: 7

Every day this week, we’ll be publishing an article that’s been hand picked by our editor, as part of CSS Theme Week [1].

This article is aimed at experienced CSS developers who need a reference for the properties related to positioning in CSS 2. Each section of this article includes a link to the relevant section of the SitePoint CSS Reference [2] and the W3C CSS 2 Specification.

This article is not intended to cover in depth all the positioning-related information contained in the specification, but to describe only those properties and values that are implemented in some or all modern browsers, and are of real-world use to you today.

Definitions

First let’s look at a few definitions of concepts that need to be explained. You can skip ahead if you like, and use this list as a reference to check if you stumble on something. Of course, don't forget that the SitePoint CSS Reference [3] contains comprehensive information about all properties, not just those collated here.

The Viewport
http://www.w3.org/TR/REC-CSS2/visuren.html#q2 [4]

The Viewport [5] is the area of the screen in which your web page is displayed. This is not the same as the Initial Containing Block.

The Initial Containing Block
http://www.w3.org/TR/REC-CSS2/visuren.html#initial-containing-block [6]

The Initial Containing Block [7] is the entire space assigned to your document. In referring to the entire space, we include any bits of the page that users have to scroll to in order to see them (in the Viewport).

It is possible to limit the size of the initial containing block by setting the width and height properties of the root element.

The Root Element

The root element is the html element. When we apply CSS Rules to the root element it is safer (allows browsers to do as they wish) to apply them to both the html and the body element:

html, body {
 /* Style Rules Here */
}

Care must be taken with this approach, however, because the net effect has the potential to compound. For example, doing the following will result in 100px of padding being applied to every edge of the page — 50px for each element.

html, body {  
 padding:50px;
}

Containing Blocks
http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block [8]

Every element in your document has a containing block [9]. This is the block element that it is inside, for example:

<div id=”content”>
 <div id=”example”>
 </div>
</div>

The div#content is the containing block for div#example.

Box Types
Boxes come in a number of different types. The only types we are concerned with in this article are block [10] boxes and inline [11] boxes.

Block Boxes
http://www.w3.org/TR/REC-CSS2/visuren.html#q5 [12]

Block boxes [13] are the types of boxes generated (by default) by elements like p and div. A block box has space around it, and elements that come after start below the box instead of next to it.

For example:

<p>Test</p>
<p>Text</p>

will be displayed (by default) as:

Test

Text

instead of:

Test Text

…as it would if p was (by default) an inline element.

Inline Boxes
http://www.w3.org/TR/REC-CSS2/visuren.html#q7 [14]

Inline elements [15] are displayed next to each other. For example:

<strong>Test</strong>
<em>Text</em>

will be displayed (by default) as:

Test Text

instead of:

Test

Text

…ignoring any other visual formatting these elements normally produce.

Positioning Schemes

http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme [16]

There are five styles of positioning in CSS 2 [17].

Normal Flow
http://www.w3.org/TR/REC-CSS2/visuren.html#normal-flow [18]

Normal positioning [19] is set according to the “normal” rules that have been around for nearly a decade.

Relative Positioning
http://www.w3.org/TR/REC-CSS2/visuren.html#relative-positioning [20]

Relatively positioned [21] elements are positioned according to the normal flow and then moved. Elements that come after a relatively-positioned element behave as if the relatively-positioned element was in its ‘normal flow’ position, even if this means they occupy the same screen space.

Float Positioning
http://www.w3.org/TR/REC-CSS2/visuren.html#floats [22]

Boxes positioned using float [23] are positioned using normal flow and then moved left or right as far as they can go. Elements that appear after them will move up to fill any gap left behind, but will flow around the box — they will not occupy the same screen space.

Absolute Positioning
http://www.w3.org/TR/REC-CSS2/visuren.html#absolute-positioning [24]

Absolutely positioned [25] elements are not affected by normal flow. They are positioned by specifying precise distances that will exist between their sides and their containing block.

Fixed Positioning
http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioning [26]

Fixed-position [27] elements work in the same way as absolutely-positioned elements, except their position is relative to the Viewport. As such, they don’t move if the page is scrolled — they stay relative to the Viewport.

CSS Visual Display Properties

The display Property
http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop [28]

The display property is used to control the box type used for an element. This allows you to do things like:

• set bold text to be block level,
• have inline paragraphs, or
• stop an element from being displayed or taking up screen space.

display:block

Sets the elements selected to block level.

display:inline

Sets the elements selected to inline.

display:none

Stops the display of the element to which it is assigned. The element is completely removed from the display—it doesn’t take up any screen space.

There are a number of other values for the display property which we’re not concerned with in this article. They deal with lists [29], tables [30] and other box types [31] that we won’t cover here, but which are covered in detail in SitePoint's online CSS reference [32].

The position Property
http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position [33]

The position property is used to specify the following positioning schemes:

• Normal Flow,
• Relative Positioning,
• Absolute Positioning, and
• Fixed Positioning.

This is done by setting position to one of the following values:

position:static;

Set this box to normal flow, the default for all elements.

position:relative;

Use relative positioning for this box using the top, right, bottom and left properties.

position:absolute;

Use absolute positioning for this box using the top, right, bottom and left properties.

position:fixed;

Use fixed positioning for this box using the top, right, bottom and left properties.

The top, right, bottom and left Properties
http://www.w3.org/TR/REC-CSS2/visuren.html#position-props [34]

All positioning schemes need you to set these in order to know how to carry out your positioning request. You should always set one of top or bottom and one of left or right. Setting both top and bottom or both left and right will not usually do what you want in Internet Explorer – usually, you’ll end up with only left or top being used respectively.

You may use the following values for these properties:

Fixed Length
You may use a fixed distance such as 20px for 20 pixels.

Percentage
You may use a percentage value such as 20%, which is 20% of the containing block’s width, or height value (for left/right or top/bottom respectively).

The float Property
http://www.w3.org/TR/REC-CSS2/visuren.html#float-position [35]

The float property takes three values. float is ignored if you have set the position property to either absolute or fixed.

float:right;
The box is floated to the right of the screen.

float:left;
The box is floated to the left of the screen.

float:none;
The box is not floated.

The clear Property
ttp://www.w3.org/TR/REC-CSS2/visuren.html#flow-control [36]

This property is used to give control of boxes that appear after a floated box. Setting this property on a box will ensure that it will appear below any floated boxes that come before it.

clear:left;
This box will appear below any left-floating boxes that come before it.

clear:right;
This box will appear below any right-floating boxes that come before it.

clear:both;

This box will appear below any left-floating or right-floating boxes that come before it.

clear:none;
This box will not clear any floating boxes that come before it.

The z-index Property
http://www.w3.org/TR/REC-CSS2/visuren.html#q30 [37]

The z-index property is used to specify how boxes stack ‘on top’ of each other and is relevant when you have two boxes that occupy the same screen space. z-index accepts a value between 0 and 32767. In a situation where two boxes occupy the same screen space the box with the highest z-index is displayed ‘on top’. If both have the same value the one that comes last in the code is displayed on top.

[1] http://www.sitepoint.com/blogs/2008/06/23/css-theme-week-more-css-than-you-can-handle
[2] http://reference.sitepoint.com/css/
[3] http://reference.sitepoint.com/css/
[4] http://www.w3.org/TR/
[5] http://reference.sitepoint.com/css/viewport
[6] http://www.w3.org/TR/
[7] http://reference.sitepoint.com/css/containingblock
[8] ://_http:/
[9] http://reference.sitepoint.com/css/containingblock
[10] http://reference.sitepoint.com/css/blockformatting
[11] http://reference.sitepoint.com/css/inlineformatting
[12] http://www.w3.org/TR/
[13] http://reference.sitepoint.com/css/blockformatting
[14] http://www.w3.org/TR/
[15] http://reference.sitepoint.com/css/inlineformatting
[16] http://www.w3.org/TR/
[17] http://reference.sitepoint.com/css/positioning
[18] http://www.w3.org/TR/
[19] http://reference.sitepoint.com/css/formattingcontext
[20] http://www.w3.org/TR/
[21]
[22] http://www.w3.org/TR/
[23] http://reference.sitepoint.com/css/floatclear
[24] http://www.w3.org/TR/
[25] http://reference.sitepoint.com/css/absolutepositioning
[26] http://www.w3.org/TR/
[27] http://reference.sitepoint.com/css/fixedpositioning
[28] http://www.w3.org/TR/
[29] http://reference.sitepoint.com/css/listformatting
[30] http://reference.sitepoint.com/css/tableformatting
[31] http://reference.sitepoint.com/css/replacedelements
[32] http://reference.sitepoint.com/css
[33] http://www.w3.org/TR/
[34] http://www.w3.org/TR/
[35] http://www.w3.org/TR/
[36] http://www.w3.org/TR/
[37] http://www.w3.org/TR/