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 Fixed Positioning. Thanks to CSS Fixed Positioning we can make an element stay right where we put it. The element is not going to move, even if we scroll the page.

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 the body of our HTML. Under our header <div> create a <div id> 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 make our image stay at the middle of the page forever! Beware this technique makes any user unhappy.
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 Fixed. Next, we set left and top properties.

 

Debug in your favorite browser the HTML page. You’ll see your image appear right where we positioned it. Resize or scroll the window the image wouldn’t move!
This can be annoying, right? Think about how this property can be useful: Ads, coupons, promotions, etc.; great methods to make the user unhappy.

STEP FIVE:

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

  • Make sure to create a <div> first. You can Fixed Positioned any inline or block elements, but it isn’t that common.
  • For Fixed Positioning we need to specify the position of the element. Left, Top, Right, or Bottom.
  • The position is going to offset from the browser’s window.
  • Fixed Position elements don’t move.
  • Internet Explorer 6 and earlier versions doesn’t support Fixed Positioning.

That’s all! You learned how to use Fixed Positioning to make an image stay right where we put it. Remember, the element is not going to move, even if we scroll the page.

Download Source Files