CSS Positioning

Positioning in CSS is extremely simple and for most sites not needed but can be used to create a neat overlapping image effect or maybe an advertisement that scrolls with your browser. There are a lot of developers that use positions way to much in there development. You do not need a position on everything. In fact everything has a position already, everything gets positioned static by default. There are 3 other positions that you can use absolute, relative, and fixed. Well lets start talking about each of these and how they work.

Position Static

This type of position as said before is set by default. This is the most basic positioning and the simplest to explain. Position static is simply all that it does is follows the flow of the page. Now this might sound weird and you might wonder why it is even a position. This is because it does not get affected by the top, bottom, right, and left properties. This is written like this:

Position Fixed

This position is the next easiest and not really used much anymore. This position doesn’t take anything from the normal flow of the website but conforms to the browser window. All other elements on the page act like the fixed element doesn’t exist. This is written like this:

Position Relative

Relative positioning is positioned relative to its normal position. These elements still hold the same normal flow but are able to be moved and can be overlapped. These elements use the space that they are given. These are written like this:

Position Absolute

The positioned absolute element is position relative to the parent containing element. All other elements act like the this positioned element doesn’t exist. If you do not have any parent container elements with positions then the position is absolute with the parent container as the html tag. Absolute positioned elements can overlap other elements. This is written like this:

Understanding Positions

There are a few things that a lot of people have troubles with when trying to understand positions. The hardest thing to learn is how to control position absolute elements. Say you have a set of code like this:

Now lets say you would like to see the container-2 and the container-3 to be in different areas. Well all that you would have to do is put a position absolute on them and you can move them where ever you would like. The only issue would be that they will use the html element as their container. So what we would want to do is limit them to only be able to more inside the container-1 element. So we would have to add a position relative to container-1. This means that everything inside container-1 will adopt the container-1’s layout or flow. So say container-1 has a width of 500px and a height of 500px, container-2 and container-3 will work inside of the 500×500 box. Also because container-3 is inside of container-2 it will become the dominant element. Meaning it will be on top.

That brings me to the next part overlapping. How to control what overlaps what. This is done by using a css function called z-index. z-index is like a filing system. Whatever element has the higher z-index ends up being on top of everything else. So lets say that we have a page that looks like this:

Now with this setup we would like to see container-2 on top of container-3 and in the middle of it. We would first have to give container-1 a position relative. Then give container-2 a z-index of say 2 and container-3 would get a z-index of 1. Now with z-index you can use negative numbers and go as high as 2147483647 in most browsers. Now you won’t find anyone using that high of a z-index. Most people stick with a 9999. Meaning that 9999 is the highest that they will go. That give you the ability to have 9999 elements that are on different levels and you can go negatively also. I try to stick to something like 50. Most website are not going to see 50 elements that need to be positioned on top of everything else. Back to our containers. With giving container-2 and 3 a z-index that means that they start creating a pile/stack/order whatever you would like to call it. Because container 2 has a higher z-index it will be on top. So say you want to put a image on top of another image, this would work.

Using positions can get tricky but as I said in the beginning if you don’t need them I wouldn’t use them. They are however a great thing to learn and mess around with. If you would like to try out each kind of position you can go over to W3Schools, they have a Positioning page that you can try out all the types and change the code.

Overview, newest android review and most popular gadget

About Shane

Hi I am Shane the main author of this blog. I am a self taught web developer. I have been working in this industry since 2008. I work a lot with WordPress, Magento, SEO & SEM, and custom built websites. I love all sports and I will try anything at least twice.

Working remotely is one of the fastest growing perks in the working world. It’s something that people talk about a lot, and it’s a solution to the “work/life balance” problem that bothers so many people. Most of us have asked the question, “Why do I work so hard?” For some people, there are many sides

Know little about the use of keylogger for Android? Wondering why so many friends choose free Android spy? What benefits can you get from tracking cell phones of your children and employees with the help of sms tracker? Keep reading and find the answers in this short article. Have you ever dreamed of taking control

As a photographer whether it be a hobby or on a professional level the realm of high dynamic range photography can be very troublesome without photo editing software specifically made for photo HDR. Aurora HDR photography can be very challenging as it is, but with Aurora the job gets a little bit easier. Some might