Introduction to CSS Positioning Properties

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 CSS 2 Specification.

This article is not intended to cover all of the positioning stuff in the Specification in depth but to only cover those properties and their values that are implemented in some or all modern browsers and are of real-world use to you today.

Definitions

First I will give a few definitions, there are some concepts that need to be explained, you can use this to check back if you stumble on something or just read it now if you prefer.

The Viewport

http://www.w3.org/TR/REC-CSS2/visuren.html#q2

The Viewport is the area on the screen that your web page is displayed in. 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

The Initial Containing Block is the entire space assigned to your document. By the entire space I mean including any bits of the page that you 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 applying CSS Rules to the root element it is safer (for browsers to do as you want) to apply them to both the html and the body element:

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

Containing Blocks

http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block

Every element in you document has a containing block. 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 boxes and inline boxes.

Block Boxes

http://www.w3.org/TR/REC-CSS2/visuren.html#q5

Block boxes are the type of boxes generated (by default ) by elements like <p> and <div>. They have space around them and elements that come after start below them instead of next to them.

Inline Boxes

http://www.w3.org/TR/REC-CSS2/visuren.html#q7

Inline elements are displayed next to each other such as a <strong> element within a paragraph, the flow of text is not broken.

Positioning Schemes

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

There are five styles of positioning in CSS 2.

Normal Flowhttp://www.w3.org/TR/REC-CSS2/visuren.html#normal-flowPositioning is set according to the 'normal' rules that have been around for nearly a decade.Relative Positioninghttp://www.w3.org/TR/REC-CSS2/visuren.html#relative-positioningRelatively positioned elements are positioned according to the normal flow and then moved. Elements that come after behave as if the relatively positioned element was in its 'normal flow' position, even if this means they occupy the same screen space.Float Positioninghttp://www.w3.org/TR/REC-CSS2/visuren.html#floatsBoxes positioned using float are positioned using normal flow and then moved left or right as far as they can go. Elements after them will move up to fill any gap left behind but will flow around them and will not occupy the same screen space.Absolute Positioninghttp://www.w3.org/TR/REC-CSS2/visuren.html#absolute-positioningAbsolutely positioned elements are not affected by normal flow. They are positioned using values for their corners as distances from their containing block.Fixed Positioninghttp://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioningFixed position elements work in the same way as absolute positioning except their position is relative to the Viewport so they do not move if your page is scrolled, they stay relative to the Viewport.

CSS Positioning Properties

The 'display' Property

http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop

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 any 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 this element. The element is completely removed from the display so that it does not take up and screen space.

There are a number of other values for the display property which we are not concerned with in this article as they deal with lists, tables and other box types which we are not concerned with here.

The 'position' Property

http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position

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 specified using the top, right, bottom and left properties.

position:absolute

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

position:fixed

Use fixed positioning for this box specified 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

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 and will usually end up with only 'left' or 'top' being used respectively.

You may use the following values for these properties:

Fixed LengthYou may use a fixed distance such as 20px for 20 pixels.PercentageYou 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

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

http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control

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

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 first in the code is displayed on top.

‍

‍