Southend Linux User Group

Positioning

Positioning elements on a web page

A box may be laid out according to three positioning schemes:

1. Normal flow. This includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.

2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block; usually the BODY tag.

All coordinates are measured from the top and from the left. Usually coordinates are specified either in pixels or as a percentage. You can also use centimetres or millimetres if you wish.

Relative positioning

First lets place a grid to see what’s going on. Each square is 20 pixels. Now I’ll add a
tag and make the width 200 pixels and the height 80 pixels. The background color is #ffe000. The style command to do this is,

    
style="position:relative;top:0px;left:0px; 
       width:200px;height:80px; 
       background-color:#ffe000;"

This is its default position within the page. All relative coordinates are measured from this position

It is probably not a good idea to mix coordinate systems, i.e. pixels and percentages.

A second DIV tag will now be added with the following style

    
style="position:relative;top:0px;left:0px; 
       background-color:#e0ff00; 
       width:100px;height:40px;"

Because DIV tags are block commands, the second box takes up a position under the first block, although it is small enough to fit alongside.

Now lets move the first DIV tag down 20px and left 60px;

    
style="position:relative;top:20px;left:60px; 
       width:200px;height:80px; 
       background-color:#ffe000;"

Notice that this has been placed relative to its original position on the grid. It has not moved the second DIV block as you might have expected. This is still placed according to its position in the normal flow.

If I want this second block to take up its same relative position as below it to must be moved down 20px and left 60px.

Nested Div tags

So what happens if I nest the second block with the first?

Again this is probably not what you expected. Although it is now nested within the first DIV tag, its taken up the position relative to the first tags reference position in the normal flow.

This is probably why many people initially find relative coordinates confusing. Through all this the style command for the second DIV tag hasn’t changed.

If it helps you may think of relative coordinates as offsets from a reference position in the normal flow.

Now it is possible to change a DIV tags style from being block to inline with the style command display:inline;

This this rule is added to both boxes then they take up the position shown below immediately below the paragraph (block) command.

Author: Alan Campion - Page reference: 3012
Last modified: Alan Campion - 2012-01-30