To understand CSS Positioning HTML Elements it is best to begin with the css ‘position property‘. The CSS ‘position property‘ has several possible values.
Here are two headings inside a html page. Note on line 6 the empty ‘style’ tags.

CSS Positioning HTML Elements. Two headers in their original position.
Two headers in their original position.

First of all lets begin with the ‘relative’ value.
Here is an example using ‘position: relative‘ to move a ‘h1’ element and a ‘h2’ element.

CSS Positioning HTML Elements.
The top heading has moved minus 30 pixels left. The bottom heading has moved positive 30 pixels left.

The ‘h1’ element on line 21 has moved off the left of the screen and now the first letter is not showing. This is due to the css code on lines 8 to 11. A ‘position’ value of ‘relative’ is given to the h1 on line 9. On line 10 a ‘left’ value of ‘-30px’ is given to the ‘h1’. This has caused the ‘h1’ heading to move minus 30 pixels to the left from it’s relative position. The relative position can also be described as the original position from where it started.
The ‘h2’ element on line 22 has moved 30 pixels left from it’s original position as the code on line 14 is a positive value of 30 pixels. Here is how it appears in the browser.

Now we can remove the css styles and therefore place the two header elements back to their original position. Again note the empty style tags on line 6.

CSS Positioning HTML Elements. Two Headers.
Headers in original position. CSS styles removed.

And in this next code snippet observe the lines 8 to 15 in-between the ‘style’ tags.

Look what happens when on line 10 a ‘top’ value of minus 30 pixel is given to the ‘h1’ element. On line 14 a ‘top’ value of positive 30 pixel is given to the ‘h2’ element. Also note how a the ‘position’ properties on lines 9 and 13 have a ‘relative’ value.

CSS Positioning HTML Elements. Relative position top.
Top header with a top value of minus 30 pixels. Bottom header with a value of positive 30 pixels value.

CSS Positioning HTML Elements – Relative Position

Below is another example to demonstrate the css position property using a ‘relative’ position. This example has four ‘div’ elements that are 50 pixels in both width and height. Each box has it’s own colour as shown in this code snippet.

CSS Positioning HTML Elements - Relative Position. Four 'div' elements stacked on top of each other.
Four ‘div’ elements stacked on top of each other.

Below on line 16 the ‘#box_2’ with the blue background has been given a ‘left’ property with a value of ’50px’.

And now the blue box has changed position by moving 50 pixels left.

CSS Positioning HTML Elements - Relative Position
The blue box has moved 50 pixels to the left.

That concludes this CSS Positioning HTML Elements – Relative Position post.


CSS3 logo. CSS Positioning HTML Elements - Relative Position

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 *