The CSS Batman

Note: This article is meant for CSS beginners.

For quite some time I’ve been noticing that when my friends begin to dig their noses on CSS they are easily freaked out and frustrated with CSS positioning.

Static, relative, absolute, fixed, float. What the hell is all this!

I visited Twitter to see if this was a general concern among CSS Beginners and I found that it actually is. Here are some tweets over the last week related to this subject:

@mxcl
Man I hate CSS positioning. Isn’t there an alternative to tables yet?

@MeredithWhitney
now that i know how to use ‹ div›s in css.. i just need to learn how to position them properly. getting there

@Plagiarizr
I’ve been trying to position that fucking twitter icon for 2 hours now. God damn, my CSS skills are dead.

@iMNK
decided that I hate CSS. hrs spent trying to position things 4 a site and no further on. mite look seriously at Ruby on Rails. i <3 OOP

@SirLyric
I win at CSS. On the other hand, it shouldn’t take 4 position: relatives and 4 floats to get the effect I need.

CSS positioning is quite easy. I guess no-one explained it plain and simple before.
I want to be crystal clear about the subject so I decided to separate the post into two parts.

The first part (this post) will focus on the four types of CSS positioning: static, relative, absolute and fixed.

The second part will focus on the float property that is obviously related to an element’s position in our site.

Let’s get started.

Position static {position:static;}

All the elements in our HTML document have a static position by default unless we specify another one. This position is how an HTML element looks like if it hasn’t any styles applied to it. This basically means a bunch of content blocks stacked one on top of the other.

These blocks have a 100% width unless we decide otherwise.

That’s why applying position:static; to an element in our CSS code is redundant, it does nothing.

Position static example (View the source code or inspect with Firebug).

¿A CSS position to make something default for every browser?

Yes, it’s necessary because of the cascading styles. Position static in our CSS code will be always used to override a previous position type from the cascade if we need to.

So that’s position static. The default one. Easy right? Let’s proceed to the other ones…

The other types of positioning (relative, absolute and fixed)

First of all, I need to say that position relative, absolute and fixed are deeply related with other CSS properties:

  • top
  • bottom
  • left
  • right
  • z-index

Without them, these types of positioning won’t work as expected.

The top, bottom, left and right property values are generally defined in pixels. And they can be both positive or negative. (Example: top:1px; left:-2px;)

The z-index property values are just numbers (Example: 1, 2, 50, 150).

Top, bottom, left and right

These properties work with reference points. These points are different when dealing with relative, absolute or fixed positioning.
Further on the post I’ll explain the reference points for each type.

Z-index, what’s that?

Back to school and maths guys!

The X axis is related to the horizontal measure or movement.
The Y axis is related to the vertical measure or movement.
The Z axis is related to the depth measure or movement.

Of course web is 2D, but elements can be on top of the other using CSS positioning (relative, absolute, fixed).
That’s why it is related with z axis, we can achieve some kind of ‘depth’.

An element with a z-index:3; will be on top of an element with a z-index:1;
The number defines the order of the elements.

Higher number = in front, lower number = the back.

Simple examples:

As a graph:

Z-index as a Graph

As photoshop layers:

Z-index as Photoshop Layers

I’ll show an HTML example later on to finish this idea. For now just keep reading :)

What do position relative, absolute and fixed share in common?

They separate themselves from the content’s flow. They become independent in a new layer of content.
By doing this, their width is affected; it’s not 100% anymore. They will have the width needed for it’s content to fit, unless we apply a determined width size.

When we look at some examples next you’ll understand this better.
Now let’s look at the different positions and their reference points…

Position relative {position:relative;}

The reference points for relatively-positioned elements are defined by their size.
An example of this in an image:

The beatle image

The images has a fixed size and it’s corners define the reference points.
Let’s move the beetle using position relative:

The css code
img {position:relative; top:-30px; right:-30px;}
The result

Beatle Movement with position relative

In relative positioning we can use one property, or a pair to define movement. The possibilities are:

  1. Top
  2. Right
  3. Bottom
  4. Left
  5. Top + Left
  6. Top + Right
  7. Bottom + Left
  8. Bottom + Right

To help you understand how the element moves when it’s property has a positive or negative value here is another image:

(Click on it for a bigger size)

CSS top, bottom, right and left movements

Is the same using position relative and a margin?

No, definetely not. You can see why in this example (View the source code or inspect with Firebug).

As I told you before, position relative (and absolute and fixed) separate themselves from the content’s flow, that’s why the element places itself on top of the previous one in this case, while the gray paragraphs with a top margin continue to flow along with the content.

Position absolute and fixed

In absolute and fixed positioning the top, right, bottom and left properties must be used always in pair. The possibilities are:

  1. Top + Left
  2. Top + Right
  3. Bottom + Left
  4. Bottom + Right

Why these pairs on relative, absolute and fixed positioning?

Because the browser needs reference points from where to move that object.
If you use a top and bottom property the browser gets puzzled, it doesn’t know in which direction to move it because the reference point is unclear. The same happens when using left and right at the same time.

Their reference points are related to the body tag, the element that wraps all the webpage:

(Click on it for a bigger size)

CSS absolute and fixed positioning reference points

However they are not the same thing…

Position absolute {position:absolute;}
Position absolute with default reference points (the body tag)

Code example:

HTML

<div class="theParent">
     <div class="theAbsoluteChild">The absolute child content</div>
</div>

CSS

.theParent {}
     .theAbsoluteChild {position:absolute; top:0; left:0; z-index:1;}

Click here to take a look at the example (View the source code or inspect with Firebug).

As you can see, absolute positioned element’s don’t care even about their parent element.

Position absolute with custom reference points

The good thing about position absolute is that it’s the only type in which we can change it’s reference points. So they DO take their parent element into consideration. How we can do that? By making another kind of relationship between the absolute positioned element, and it’s parent (that will be the one defining the points).

To create custom reference points for absolute positioned elements we must assign to it’s parent element a position relative property.

Code example:

HTML

<div class="theParent">
     <div class="theAbsoluteChild">The absolute child content</div>
</div>

CSS

.theParent {position:relative;}
     .theAbsoluteChild {position:absolute; top:0; left:0; z-index:1;}

Click here to take a look at the example. (View the source code or inspect with Firebug).

When an absolute positioned element doesn’t have a parent element with position relative applied to it, it will use it’s default reference points. The onces related with the body tag.

In the example the coordinate 0 0 (top:0; left:0;) is related to the first top left pixel where the parent element starts.

If the element has 5 parent tags, it doesn’t matter, you can choose any of them. The closest parent to the absolute positioned element will be the reference.

That’s easy right? And kind of useful :)

Position fixed {position:fixed;}

Fixed position looks quite the same as absolute at first, but it’s not really like this. There are three differences:

  1. It’s reference points are always related to the body tag. We can’t relate it with a parent element. It ignores it.
  2. While in absolute the element stays in one place, in the fixed position it moves along with the scroll bar (See example link below)
  3. It’s almost 100% cross-browser except for IE6 that doesn’t understand the property (there are hacks to fix it if you like, google it)

All this is better explained with a simple example: Position fixed example (View the source code or inspect with Firebug). Scroll to check it.

Last thing: z-index in an HTML example

View the z-index example. (View the source code or inspect with Firebug).

Optional Download

Here you can download all the example files.

Final thoughts

Sites are usually done with 95% static elements with float properties (soon in part 2).
Anyway, it’s important for you to know these properties because they are used frequently in sites. But be selective.
It has no sense making everything absolute or relative.

I’ll explain floats soon so you can have a 100% knowledge on positioning of CSS, and decide for yourself when to use each type of position.

I hope the article helps you out and is easy to understand. I tried my best to accomplish that. See you soon with floats ;)