First of all here is a CSS Positioning HTML Elements – Absolute Positioning example. Four ‘div’ elements with ‘position: absolute‘ given to each.
Also on lines 8 – 10 the css user agent stylesheet margins for the body have been reset to zero.

Only the yellow ‘div’ is visible?

CSS Positioning HTML Elements - Absolute Positioning. A yellow box.
The fourth ‘div’ element with a yellow background is visible.

The ‘absolute’ position value places each box in exactly the same place on the page however the yellow one is the last placed element and therefore the only visible element. The red, blue and green ‘div’ elements are all hidden underneath the yellow ‘div’ element.

  1. All the ‘div’ elements have a ‘position: absolute’ value.
  2. Each box is placed in the top left of the page beginning at the coordinates of (0,0) pixels.
  3. Only the yellow box is visible as the other three boxes are underneath. All elements are at the same coordinates of (0,0) pixels.

Moving the first three ‘div’ elements makes the boxes visible.

CSS Positioning HTML Elements - Absolute Positioning. Four different coloured boxes.
The red, blue and green boxes have been moved from under the yellow box.
  1. The red, blue and green box are moved.
  2. The red box moves ‘left’ 50 pixels and therefore is now placed at the coordinates (50,0) pixels.
  3. The blue box moves ‘top’ 50 pixels and therefore is now placed at the coordinates (0,50) pixels.
  4. The green box moves ‘top’ 50 pixels and ‘left’ 50 pixels and therefore is now placed at the coordinates (50,50) pixels.
  5. The yellow box remains at the original position as it has not been moved.

Position Relative

Position-relative‘ behaves differently as shown here with the same ‘div’ elements with a position value of ‘relative’ instead of ‘absolute’.

CSS Positioning HTML Elements - Absolute Positioning. Four boxes stacked on top of each other.
Each ‘div’ element has a relative position value.
  1. The four ‘div’ elements all have a ‘position: relative’ value.
  2. The red box is placed in it’s original position at the coordinates (0,0) pixels.
  3. The blue box is placed in a relative position to it’s original position at the coordinates of (0,50) pixels.
  4. The green box is placed in a relative position to it’s original position at the coordinates of (0,100) pixels.
  5. The yellow box is placed in a relative position to it’s original position at the coordinates of (0,150) pixels.

And finally the four ‘div’ elements are moved.

CSS Positioning HTML Elements - Absolute Positioning. Four colourful boxes.
Relative position results in the ‘div’ elements being moved differently to absolute positioning.
  1. The red, blue and green box are moved.
  2. The red box moves ‘left’ 50 pixels and therefore is now placed at the coordinates (50,0) pixels.
  3. The blue box moves ‘top’ 50 pixels and moves a further 50 pixels from the coordinates (0,50) pixels and is therefore placed at the coordinates of (0,100) pixels.
  4. The green box moves ‘top’ 50 pixels and moves a further 50 pixels from the coordinates (0,100) pixels and is also moved ‘left’ 50 pixels and is therefore placed at the coordinates (50,150) pixels.
  5. The yellow box remains at the coordinates of (0,150) pixels.

CSS Positioning HTML Elements – Absolute Positioning

An element that has an ‘absolute’ position value will be positioned in relation to the body. An element that has a ‘relative’ position will be positioned relatively to where it would have appeared originally.
I know this all sounds a bit cryptic and the css position property has perplexed many a web designer. My advice would be to accept not being able to fully understand the css position property and be satisfied with gaining more understanding as you become more familiar with the css position property.

Try this example where all the four ‘div’ elements are placed into the corners of the browser window. The elements stay in place even if the window is resized.

CSS Positioning HTML Elements - Absolute Positioning. A box in each corner.
The four ‘div’ elements are now placed in each corner.

In the next example the ‘position’ property for each ‘div’ element is given a ‘relative’ value instead.

CSS Positioning HTML Elements - Absolute Positioning. Four boxes stacked on top of each other.
Each ‘div’ element has a relative position value.

Each ‘div’ element is positioned relative to the other elements within the page. The red box is placed first at the very top-left. The blue box is positioned at the very top of the red box. The blue box does not move right in the window as ‘relative’ position will only place an element in relation to other elements. So the right value of 0 for the blue box is interpreted as no further right than the red div element.

If we change the ‘position’ value of the blue box on line 19 to ‘absolute’ look what happens.

CSS Positioning HTML Elements - Absolute Positioning. Blue box moved top right.
The blue ‘div’ element now moves to an absolute position.

If we change the green ‘div’ elements ‘position’ value to ‘absolute’ it will move from being positioned relative to the red ‘div’ element to being positioned in the absolute space of the body window.

CSS Positioning HTML Elements - Absolute Positioning. Green box with absolute position.
The green ‘div’ element is moved to the bottom left of the absolute body of the window.

Lastly we will move the blue ‘div’ element back by changing it’s ‘position’ value back to ‘relative’.

CSS Positioning HTML Elements - Absolute Positioning. The blue box with a 'relative' position value.
Line 19 has changed back to ‘relative’. The blue ‘div’ element has moved back in relation to the red ‘div’ element.

We will also move the yellow ‘div’ element to the bottom right by changing it’s ‘position’ value to ‘absolute’.

CSS Positioning HTML Elements - Absolute Positioning. Yellow box moved to the bottom right.
The yellow ‘div’ element has moved to the bottom right of the body element. On line 35 the ‘position’ value has changed to ‘absolute’.

CSS3 logo. CSS Positioning HTML Elements - Absolute Positioning

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *