position is a very useful CSS property that gives us very explicit control over where things should appear on the page.
position gives us the ability to move elements to the exact spot - to the pixel - that we’d like to see them. There are two
main types of position that we see most often: position:relative and position:absolute. I’ve created a quick rundown of how position:relative and position:absolute work in the field.

One of the trickier pieces of CSS positioning is figuring out how to position elements absolutely inside of other elements. Instead of using position:relative to slide an element around, then using things like negative margin or other tricks to reset the document layout, you can use position:absolute within a parent element with position:relative set, and you can get that layout you want without needing to reposition any other elements. Here’s a quick rundown:

• Create a parent element with a style property of position:relative
• Inside this parent container, place the element that you’d like to absolutely position along with all other elements. Basically, the larger parent will act as a container for all of the other children, or pieces of the layou
• Since elements are positioned according to their nearest parent element with position, your absolutely positioned element will move to the correct spot inside the larger container while not disrupting the flow of the others.

With position:relative, we can nudge things around, moving smaller elements, especially inline elements, wherever we like.

position:relative and position:absolute are two very important tricks for creating CSS-based layouts, and are especially useful when trying to replicate a mockup or comp design to the pixel. CSS positioning is an extremely useful way to realize even the most complicated layouts and is often a quick way to get layouts right.

I’m writing up a series of tutorials on CSS-based layouts. Why? Because making the transition from tables to divs and CSS can be difficult and there are often many little quirks that you only learn to conquer with practice.

In the first tutorial, I give a little intro to how block-level elements work and how people familiar with building presentations using tables can see block level elements in a familiar light.

The big question is probably “why the heck should I give up tables?” The web-politically correct answer is “because they’re meant only for presentation,” which is true. However, that doesn’t mean a whole lot in the real world. I’ll tell you personally that there are several reasons why using CSS-based layouts is easier:

• CSS is found in a single file, making for easy changes
• CSS-based layouts allow for multiple selectors acting on many different children, letting you
  create much more visually attractive (if not much, much more intricate) layouts and designs
• Extremely complicated table-based layouts become almost impossible to debug
• CSS-based layouts are usually much slimmer
• Tables are limiting; you can do just about anything with CSS

…and so forth. Table-based layouts are pretty quick and easy to throw together, but not much quicker and easier than CSS. When you add the time it takes to debug and change table-based layouts, and the ease of changing and freedom given by CSS (not everything has to fit in a row and a cell that’s in another row and cell that’s in another…), and it’s an easy battle.

Learn some block-level basics and start down the path of dropping tables for CSS.