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 Absolute Positioning. Thanks to CSS Absolute Positioning we can remove an element from the entire page layout and place it exactly where we want it to go.

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 content container. Let’s move it to the middle of our page using Absolute Positioning.
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 Absolute. Next, we set left and top properties, and finally the state the width of our image.

 

STEP FOUR:

Debug in your favorite browser the HTML page. You’ll see your image appear right where we wanted it.
Notice how our image is removed from the entire flow and positioned according to the properties we specified. It’s like the other elements were ignoring our CheckMark <div>.

STEP FIVE:

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

  • Make sure to create a <div> first. You can Absolutely Positioned any inline or block elements, but it isn’t that common.
  • Allows to precisely position elements.
  • Browsers place an Absolute Positioned element in any position we specify. Top and right, top and left, bottom and left, bottom and right.
  • Absolute Positioned elements does not affect whatsoever other elements.
  • We need to specify the width of our image or box. If not width is specified the element or box will take up the entire width of the browser.
  • Keep in mind that the position of our element is going to be relative to the closest ancestor element. In this case, the content <div>.
  • Absolutely Positioned elements can be layered on top of each other. Just use the z-index property to specify their placement.

That’s all! You learned how to use Absolute Positioning to place an element anywhere on the page without affecting other elements.

Download Source Files