CSS Positioning

I've been working with web design for almost two years now. Actually, I might have passed the two year mark, I'm not entirely sure, I should go check that sometime just to know. Anyways, one thing I've been using for a long time is CSS positioning to get things to show up where I want them on the page. You can do all sorts of nifty stuff with positioning, but here is the catch: sometimes it is just downright confusing to understand.

Sure, I've made it work just fine. I have built several websites, but to be honest there were times and still are occasionally when I truly don't entirely grasp why something I just added to my code worked to fix the problem I was having. It was more of a stab in the dark that happened to be successful.

So, this morning I set out to figure out exactly how it works. I have always understood absolute positioning as it is incredibly straightforward. You simple tell the piece of the page exactly where to go and it stays there, end of story. Floating was always pretty straightforward as well. Tell something to float either direction and it moves as far as it can to the left or right and sticks there until you tell it to do something else.

What always sort of confused me was relative positioning. I've had it explained to me many, many times with several different analogies, but it never truly made sense. So, after owning a copy of CSS Mastery for quite some time now and never actually reading the entire thing I decided to lug it to work today and see what it could help me with. As it turns out if I would have just taken the time to read the book in the first place I would have understood relative positioning the entire time.

It seems my confusion on the issue stems from the fact that somewhere in either my classwork or my own haphazard trial and error I have gotten into the habit of always applying a relative position to everything that I wanted to float. That might not make sense to a lot of people, but it did to me at the time, and I've been doing it ever since. In actuality those to properties are not required to be used together, and can be used independently for different purposes. Sometimes they have to both be used, but not always. That is what had me entirely thrown off.

Knowing now that I can float things with just the float property and in some cases a position property is entirely pointless and unnecessary has opened my eyes to some new solutions in my CSS code that I've struggled with for a long time.

Now I'm determined to read CSS Mastery from cover to cover in its entirety to make sure I don't have any other strange habits that are causing me to stumble unawares. It's quite interesting how sometimes I get myself into a rut of thinking I've got one particular part all figured out and consider it "basic" but then discover I had it a little sideways the entire time.