Screenflicker

home

CSS Tip: Positioning Part 1

14 Jul 2005

Over the last few years I have become fairly adept at using CSS and building web standards, accessible websites — at least as accessible as it was thought of for the last year considering how things are currently changing. I must profess that I am self-taught in these development techniques so sometimes I don't fully understand why something works as it does but I know that it will work that way.

There are a few different aspects of CSS that I would like to investigate further. Before everyone starts chiming in about how there are loads of websites out there that already do this, I know. There are also many email lists that offer advice and theories as well and I understand that. This is more of a personal playground for me to explore attributes of CSS that I don't fully comprehend but would like to. If anyone else finds this useful then that's fantastic.

This is not...

What this won't be is an indepth explanation quoting various passages from the W3C spec. These experiments will be tests on specific properties of CSS, generally focusing on one property at a time. All CSS will be inline and I will do my best to document my thoughts and interpretations of the code and what's happening.

Without Further Ado

Sometimes positioning is a confusing topic. When to use absolute vs. relative vs. static vs. fixed, how to position blocks within their parents, and how does it all look.

So what we'll start with is a set of blocks. These blocks will be the same throughout this experiment/discussion with the exception of changing the position property. Here is the plain code for the blocks [No need to worry about the paragraph elements, I've only defined the colors and set the margins and padding at zero]:

.container {
    width: 200px;
    margin: 5px;
    padding: 5px;
    min-height: 200px; /* For modern browsers */
    height: 200px; /* For IE */
    background-color: #D5C1C1;
    display: block;
}

.box1 {
    width: 100px;
    margin: 0;
    padding: 0;
    background-color: #00571F;
    display: block;
}

.box2 {
    width: auto;
    margin: 2px;
    padding: 2px;
    min-height: 100px;
    height: 100px;
    background-color: #697DCD;
    display: block;
}

And the HTML will be:

Box 1

Box 2

And this is what it looks like.

Pole Positions

There are four positioning values — absolute, relative, static, and fixed. There are also several other properties associated with positioning — overflow, z-index, top, right, bottom, left, clip, and vertical-align. Here is a quick breakdown of the associated properties:

Today we are only going to touch on the main positioning properties, absolute and relative.

Absolutely

The first thing to notice is the difference between absolute and relative positioning. Using absolute positioning will take the element out of the normal flow of the document. The associated properties for absolutely positioned blocks refer to the document or browser window. Meaning that, in the case of boxes, the absolutely positioned box will be positioned on the full document. So lets try this:

.container {
    position: relative; /* Only added to keep the boxes contained */
    width: 200px;
    margin: 5px;
    padding: 5px;
    min-height: 200px; /* For modern browsers */
    height: 200px; /* For IE */
    background-color: #D5C1C1;
    display: block;
}

.box1 {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100px;
    margin: 0;
    padding: 0;
    background-color: #00571F;
    display: block;
}

.box2 {
    width: auto;
    margin: 2px;
    padding: 2px;
    min-height: 100px;
    height: 100px;
    background-color: #697DCD;
    display: block;
}

Have a look. Box 1 is positioned absolutely and box 2 is not positioned at all. Notice how the Green box (1) is now overlapping the blue box (2).

As noted, adding the position: relative to the container class was just to keep the green box inside the container box. If you remove the position: relative from the .container class this is what happens.

There are some great uses for using absolute positioning. Most of the time designers or coders use it when they want to really emphasis a particular area. Others use it when they are looking for that pixel perfect design. I used to use it all the time when I started working with CSS, before I knew any better ;^)

Relatively speaking

I'm a much bigger fan of relative positioning. It's more flexible and keeps the positioned element within the flow of the document. Using relative positioning is great for getting those navigation lists into proper placement, especially when you're dealing with more complex headers. So, lets add some relative positioning to our example and see what happens.

.container {
    width: 200px;
    margin: 5px;
    padding: 5px;
    min-height: 200px; /* For modern browsers */
    height: 200px; /* For IE */
    background-color: #D5C1C1;
    display: block;
}

.box1 {
    position: relative;
    top: 0;
    left: 0;
    width: 100px;
    margin: 0;
    padding: 0;
    background-color: #00571F;
    display: block;
}

.box2 {
    width: auto;
    margin: 2px;
    padding: 2px;
    min-height: 100px;
    height: 100px;
    background-color: #697DCD;
    display: block;
}

Example here. As you'll notice it looks a lot like the first example which, as you'll remember, doesn't include any positioning at all.

So what's the benefit? Well, lets say that you have a header with two different background images. Let's also say that you'd like the ability to position the elements in different combinations. Using relative positioning on the block containing the text (or navigation) you can set the relative position of one block — the block containing the text or navigation — and the other blocks can be left alone. For example:

.container {
    width: 200px;
    margin: 5px;
    padding: 5px;
    min-height: 200px; /* For modern browsers */
    height: 200px; /* For IE */
    background-color: #D5C1C1;
    display: block;
}

.box1 {
    position: relative;
    top: 45px;
    left: -5px;
    width: 100px;
    margin: 0;
    padding: 0;
    background-color: #00571F;
    display: block;
}

.box2 {
    width: auto;
    margin: 2px;
    padding: 2px;
    min-height: 100px;
    height: 100px;
    background-color: #697DCD;
    display: block;
}

Example here.

As I mentioned, only one of the three block elements needs the position property to make this happen. This is also especially helpful if the element you'd like to position is buried deep in the page structure. Some people would say it looks like the same as using absolute positioning, and they would be right. It does look like that.

The major difference is this, if I were to use absolute positioning to acheive this result I would have to add the positioning property to each and every one of this blocks parents. By using relative positioning I only need to add the positioning property to one block. If the block in question is buried in the page using absolute positioning could cause some unexpected results. I've actually had navigation lists disappear because of this and that's not fun.

Generally the path of least resistance is a preferred way to go. This is especially true with positioning, at least in my opinion. Why position every element so that you can have better control over one element halfway down your page. Doesn't make sense to me and seems like a whole lot more work than it needs to be.

Next...

In the next installment of the CSS Tip: Positioning I'll cover the static and fixed positioning properties.

comments powered by Disqus