Today we're going to talk about advanced positioning techniques. This is a widely used property in CSS and it very useful! Positioning allows you to position an element, place one element behind another, and determine what happens when an element is too big.

The position of an element is controlled by top, right, bottom, and left properties. The stacking order of these elements is called the z-index property.

Position

As mentioned above, the position property allows us to specifically position an element on a web page, place one element behind or above another, and to determine what happens when an element is too big.

Properties to Know

  1. position
    • top
    • right
    • bottom
    • left

Note: the top, right, bottom, and left properties will NOT work unless a position property is defined first!

Values

  1. static
  2. fixed
  3. absolute
  4. relative

Static

All elements are positioned static by default. These are positioned by the normal flow of the web page and it is NOT changed by using the top, right, bottom, or left properties.

p.static {
     position:static;
     top:30px; /*This will not work*/
     right:25px; /*This will not work*/
}

Fixed

A fixed position is relative to the browser window. Its place is literally locked in place and if you scroll, the element will remain exactly where it is.

p.fixed {
     position:fixed;
     top:30px;
     right:25px;
}

The above code will place the element 30 px from the top of the browser window and 25 px to the right of the browser window while the position of the element is fixed. This means you can scroll the browser window and the element will literally be fixed on the page (it will not move). No matter where you are on the page, the element will always be visible.

If you use this fixed property, all other elements on the page will not know that it exists. The fixed element is removed from the normal flow of the web page so it does not impact any other elements. This also means that the fixed elements can overlap any other elements on the page.

Relative

A relative positioned element is relative to its "normal position" on the page. The relative positioned elements can be moved to overlap other elements; however, it is different in that the space for the normal flow of the page, is preserved. Even if two elements are over lapping the space for the elements is still preserved.

p.relative {
     position:relative;
     top:-50px;
     right:10px;
}

Note: this will be made clearer via example in a small downloadable zip archive at the end of this tutorial. I strongly recommend downloading this tutorial!!

Absolute

Elements that are absolutely positioned are removed from the normal flow of the web page. Like the fixed value, all other elements on the web page don't know this element exists. This means elements can easily overlap one another.

p.absolute {
     position:absolute;
     top:50px;
     left:350px;
}

This element would be positioned in accordance to the html element of the web page. This would be exactly 50px from the top of the web page and 350px to the left of the web page as well.

If you wish to see these examples in action and read more about this material please click on the download button below.
position.zip
position.zip
Size: 57.02 KB

Be Sociable, Share!