General Reference

Positioning (Tutorial)

Introduction

Positioning is a method for more precisely placing an element on a Web page by specifying x, y, and in some cases z, coordinates. There are three main types of positioning:

Relative, which moves the element relative to it's starting position in the mark-up;
Absolute, which positions the element relative to it's nearest positioned ancestor, or if it has none, relative to the initial containing block (<html> tag or canvas, depending on browser);
Fixed, which positions the element relative to the screen as a whole. However IE 6 and below don't support fixed positioning, so unless you know a javascript hack, it's best to avoid it.

To see how this works, consider the following examples:

Relative Example

Here is a simple layout with three <div> blocks. Note how one block is slightly out of position:

Box 1

Box 2

Box 3

I started by creating three <div> blocks in the markup:

<div class="box" id="box1">Block 1</div>
<div class="box" id="box2">Block 2</div>
<div class="box" id="box3">Block 3</div>

Now for the CSS:

.box {
    height: 100px;
    width: 150px;
    float:left
}
#box1 { 
    background-color: #FF0000;   
}
#box2 {
    background-color: #FFFF00;
}
#box3 {
    background-color: #339900;
}

If you copy and paste this code exactly, your boxes will be arranged in a nice neat line (unlike the example above)...we'll add the positioning in a second. But first a note about the addition of the floats; these are not required for positioning. I used them here to line-up the boxes horizontally. Had I used in-line elements (like images) the floats would not have been required.

Okay, now for the positioning. Add some code to the CSS for box2:

#box2 {
    background-color: #FFFF00;
    position: relative;
    left: 50px;
    top: 50px;
}

The middle box shifts to the right and drops a bit. The 50px offsets (both top and left) are measured from the original position of the box within the markup. Note too that the red and green boxes do not move, that is because as far as they are concerned, the yellow box is still in its starting position—in other words, they ignore the positioning of the yellow box, which allows the yellow box to overlap the green box. In fact, had I not added a bunch of returns before the text that follows the boxes above, the yellow box would have overlapped the text, like this:

Box 1

Box 2

Box 3

This text is being overlapped....................................................................by the yellow box.

Of course, this can make things........................................................ difficult to read.

You can also position the elements from the right and/or bottom edges, something like this:

#box2 {
    background-color: #FFFF00;
    position: relative;
    right: 50px;
    bottom: 50px;
}

This causes the box to move up and to the left. You can also position with negative numbers; setting both the top and left positions to –50px will give you the same result as using 50px for the right and bottom positions.

Absolute Positioning

When you position an item absolutely, you remove it from the flow of the document, causing the elements that follow it collapse up and/or over, closing the gap; they behave as if the positioned element were not there:

Box 1

Box 2

Box 3

To see absolute positioning in action, we should add a containing element to the HTML markup that is also positioned:

<div id="container">
    <div class="box" id="box1">Box 1</div>
    <div class="box" id="box2">Box 2</div>
    <div class="box" id="box3">Box 3</div>
</div>

Now add the following style:

#container {
    position:relative;
}

Finally, change the positioning of box2 to absolute. Note how the green box slides over, up against the red box, filling in the area previously occupied by the yellow box (box2).The yellow box's position is measured relative to the containing box. As with relative positioning, you can also set the position of an element from the right and/or bottom edge. However, IE 6 and below have a bug—if you wish to position from the bottom or right, you need to set a width and height for the containing element, otherwise it will be positioned relative to the screen.

Using the Z-index

Positioned elements overlap other elements. What if you have multiple positioned elements that overlap one another? Usually, the last one listed in the markup will end up on top. But what if you want an earlier item to sit atop one that comes later?

Box 1

Box 2

Box 3

In the arrangement above, the markup is the same as we used last time (three <div> blocks wrapped in a container). The CSS is the same except that box2 and box3 are absolutely positioned (with an added z-index, see below), and I changed the x and y amounts:

#box1 {
    background-color: #FF0000;
}
#box2 {
    background-color: #FFFF00;
    position: absolute;
    left: 50px;
    top: 30px;
    z-index:20;
}
#box3 {
    background-color: #339900;
    position: absolute;
    left: 100px;
    top: 10px;
    z-index:10;
}

The big difference of course is the addition of the z-index. Without it, box3 would sit above box2. However, I gave box2 a greater z-index than box3; the greater the z-index, the higher it appears in the stacking order. Why did I use the values 10 and 20? I could have used z-index values of 1 and 2, but I like using larger numbers in case I want to slip something in-between later on (large numbers give me a greater margin for error). The ultimate size of the number doesn't matter, I could use 100, 1,000 or 100,000.

Daniel C. Fergus

Artist & Educator

Positioning (Tutorial)

Introduction

Relative Example

Absolute Positioning

Using the Z-index