CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, Relative, and Static. In this tutorial we are going to learn all about Relative Positioning. Thanks to CSS Relative Positioning we can generally place elements anywhere in the page and leave empty the space where they were positioned at first.

The other three types of positioning will be explained on other tutorials.

NOTE: This tutorial was completed using XHTML 1.0 Transitional with CSS. It is assumed you have basic knowledge of HTML and CSS principles.

STEP ONE:

I created a XHTML document with different <div>s tags: One for the header, one for a container that includes a <div> for the content, and one for the footer.

Let’s have a look at the initial HTML setup:

Also, I added a Cascading Styling Sheet to it. Download the source files to obtain the entire code for this tutorial.

 

STEP TWO:

Let’s add an image into our content <div>. Wait! We don’t want our image to be part of the content. Easy! Let’s create a <div> for it.

Why a <div>?  A <div > outlines a separation in an HTML page. It also makes the process of styling elements with CSS easier.

STEP THREE:

Our image will appear at the left side of our page. Let’s offset our element to the middle of our container.
The first thing we need to do is to create a New CSS Rule to specify the position of our <div>.

Then, we are going to add some properties for our CheckMark <div>.

The first thing we did was to set the Position Property to Relative. The check mark image moves, but since it is no longer part of the container the rest of the page stays underneath. Next, we set left and top properties. Keep in mind the offset is from the position where was originally placed. Here we are specifying that the image must be displayed 200 pixels from the left and 50 pixel from the top; starting where the div was placed in our page (Inside the content <div>).

 

STEP FOUR:

Debug in your favorite browser the HTML page. You’ll see your image moved to overlap the content, but its original space is reserved. Just before the image is displayed the browser offset its position to the one we specified.

STEP FIVE:

To conclude, let’s learn some facts about Relative Positioning:

  • Keeps elements inside any container.
  • Allows elements to have their own space reserved.
  • The offset is from the position where it is placed in the page. (In this case under the content <div>.
  • Browsers place a Relative Positioned element in any position we specify. Use top, or bottom, and left or right. Keep in mind the element will move relative to where it was originally placed.
  • The <div> where we placed our image is going to occupy its original space.
  • A Relative Positioned element can overlap other elements.

That’s all! You learned how to use Relative Positioning to move an element out of its container without moving the entire page’s elements out of their place.

Download Source Files