JavaScript LogoAbsolute positioning is one of the four types of CSS “position” values

When an element is given absolute positioning, the following behavior takes place: 1 – The element is positioned in the top-left-most corner of the nearest parent element that has positioning (this is the default), 2 – If no parent elements have positioning, then the element is positioned in the top-left-most corner of the browser window and 3 – You can use the “top”,”left”,”bottom” and “right” properties to place the element absolutely as you need.

Example # 1

In Example # 1, we have set up three container DIVs. If you look at the class names, you’ll see that there is an outermost DIV: “grand-parent”, an inner DIV: “parent” and an innermost DIV: “child”. When you look at the jsFiddle.net example, there is simply a big yellow box (the grand-parent), a smaller red box inside of the yellow box (the parent), and a small green box inside of the red box (the child).

I’ve set the height property for each element so that we don’t need to concern ourselves with any text nodes; so it’s just three empty DIVs, which look like a box, within a box, within a box.

Here is the jsFiddle.net link for Example # 1: http://jsfiddle.net/tK8hH/

Example # 2

An absolutely positioned element will be positioned relative to the nearest parent with positioning.

In Example # 2, we gave the “child” DIV absolute positioning, and set the bottom and right properties to 0. When you look at the jsFiddle.net link, the green box is in the bottom-right-hand corner of the screen. The reason for this is that an absolutely positioned element will be positioned relative to the nearest parent with positioning (i.e. “absolute”, “relative” or “fixed”). If no parent (i.e. containing) elements up the DOM have positioning, then the element will be positioned relative to the browser window. So, in this case, the green box is positioned absolutely, relative to the browser window. Because the “bottom” and “right” properties are both set to “0”, the green box appears in the bottom-right corner. If you change it to “top:0;”, then the green box will appear in the TOP-right corner of the browser window.

Here is the jsFiddle.net link for Example # 2: http://jsfiddle.net/7U8cN/

Example # 3

In Example # 3, we gave the “parent” element relative positioning. This has no visual effect on the “parent” element, but it does change things quite a bit for the green “child” DIV. Because the “parent” now has positioning, the green “child” DIV appears in the lower-right-hand corner of the red “parent” DIV. This is because it is now positioned absolutely, relative to the red “parent” DIV. Here is the jsFiddle.net link for Example # 3: http://jsfiddle.net/4KUWc/

Example # 4

In Example # 4, we have changed the red “parent” DIV’s positioning to “absolute” and given the yellow “grand-parent” DIV “relative” positioning. So let’s run down what is happening here:

  • The red “parent” DIV is positioned absolutely, 300px to the right, and 50px from the top of the yellow “grand-parent” DIV
  • The green “child” DIV is positioned absolutely, -50px from the bottom, and -50px from the right of the red “parent” DIV.

If you look at the jsFiddle.net link for Example # 4, you’ll see that the red box is now sticking outside of the right side of the yellow “grand-parent” DIV, and the green “child” DIV is sticking outside of the red “parent” DIV, 50px to the right, and 50px towards the bottom.

Here is the jsFiddle.net link for Example # 4:

Summary

CSS Absolute Positioning is quite a useful tool when it comes to nudging elements to exactly where you want them to be. So the key to mastering absolute positioning in CSS is to remember two rules:

  1. An absolutely positioned element will be positioned relative to the nearest parent or ancestor element that is positioned relative or absolute
  2. If there are no positioned parents, the element will be positioned absolutely, relative to the browser window

One Comment

Comments are closed.