THATBlog

When first learning to write HTML and CSS, creating a compatible, functional, great-looking website can be a daunting task. Many early developers are stuck with hours upon hours of troubleshooting, trying to figure out that one small piece of CSS that is causing their page to to look like a garbage dump. That's why, in this series of posts, we'll be going back to the basics and looking at some simple CSS methods you can use to crate great designs with as little hassle as possible.

The first item we are going to look at is absolute positioning. Let's assume you have a box like below that you want to place some objects in, but they are not going to be sitting side-by-side like usual. Instead, you want them to be layered on top of each other, and you want them spread out in different corners of the container.

The first rule when placing objects inside of a container is to give the container a style of "position:relative". If this is not done, then the absolute elements we will place later will ignore this container, and will find the next highest div that is static and all of your positioning will be wrong.

Next, we can place any elements we please inside this container. By setting the elements to "position: absolute;", we are essentially releasing it from any boundaries that existed. It can now overlap and move freely within (or outside of) the boundaries of the container through the use of top, right, bottom, and left properties.

Being able to move these elements anywhere on the page is great, but what about overlapping? Let's say I want to add another div in the center of the box that would overlap the other boxes:

Now we have an overlaying box! There's only one problem, it's not showing over the other boxes. This is where z-index comes in.

By setting the z-index to '1', we are essentially telling the block to show above the other blocks whose default value is still '0'. So far we've seen that all of these blocks can be positioned inside of the container, but what if we want our blocks to show outside the boundaries of the container? we can give our blocks a negative position, just as easily:

By simply creating a negative position on the element, it will cause the element to move outside the bounds of your container. This can be used in a variety of ways on your website to create very interesting results.

And those are the basics of absolute positioning. Stay tuned for part 2 where we discuss some more basics of CSS.