CSS Tutorial

CSS Positions

The CSS positioning is the placement of elements in their order of x and y axis and overlapping (z-index).

3
  Do It Yourself

The CSS position property can also be used to control the boundary of a child (inner) elements.

This property is provided with some values in order to specify the kind and direction to position an element

  • static
  • absolute
  • relative
  • fixed
  • sticky

What to Consider?

You must consider the types of position before using these values, as they may not affect the elements if the position property is set to static.

"Static" defines the default value of the position property, it makes the elements static and places them in order of how they are being written in your HTML code.

Static Position

As explained above static position is set by default. They are not affected by the properties (top, left, bottom, right). As the word implies, the position cannot be controlled from its default ordering.

However, static can be used to restore to the default position if the position has already been set to another.

Example 1

div.scrollpan {
   position: absolute;
   top: 50px;
   bottom: 50px;
}

The above example sets the position of <div> elements with class="scrollpan" to 50px away from the top and 50px away from the bottom of the containing element.

The second example below will restore the position to default (setting it to normal position without moving away from the containing element) with the static value of the position property.

Example 2

div.scrollpan {
   position: static;
}​

  Do It Yourself

Relative Position

A relative positioned element is an element positioned relative to its default position.

These elements can also overlap other elements and it is possible to set the direction using the top, left, bottom and right properties.

Example

.left_scrollpan {
   position: relative;
   top: 0;
   left: 20px;
}
.right_scrollpan {
    position: relative;
   top: 0;
    right: -50px;
}

  Do It Yourself

Live Example

Absolute Position

An absolute positioned element is positioned relative to the containing (parent) element that is having a position value different from static.

If no containing element that has a position value other the static is found, the element will be positioned relative to the <body> element. This element can also overlap other elements and it is posible to set the direction using the top, left, bottom and right properties.

The following example defines an element with class="abs_class" that is positioned absolute inside a relative class="container" parent.

Example

.container {
  position: relative;
}

.container .abs_class {
   position: absolute;
   top: 50px;
   left: -60px;
}

   Do It Yourself

Live Example

Fixed Position

Setting an element to fixed position will position the element relative to the browser window, and will not move even if the window is scrolled.

Example

.fix_pan {
   position: fixed;
   top: 30px;
   right: 5px;
}

   Do It Yourself

Live Example

The fixed postion does not work on IE 7 and 8 if the <!DOCTYPE> declaration is not set at the top of your document.

Sticky Position

As the word implies, a sticky elements is hangs to the viewport of a webpage whenever a certain scroll position is met. An element with a sticky position adopts both position relative and position fixed, when a user scrolls to a certain position, the element gets fixed and when the user moves out of the position, it becomes relative.

Example

.sticky_pan {
   position: sticky;
   top: 30px;
   right: 5px;
}

   Do It Yourself

Live Example

sticky is not supported in Internet Explorer, Edge 15 and earlier versions. Safari 6.1 until 7 requires a -webkit- prefix to support it.

Making Elements Overlap

When elements position is set but not static, they overlap according to the order of how they follow in your coding.

To control the way elements overlap, you can use the z-index. It is set according to the index value you provide.


The index ranges from "-1 to 100" (lower to upper). This means that the lowest index is -1 and the highest index is 100.

button {
   position: absolute;
   left:50%;
   top: 50%;
   z-index: -1; }

div {
   position: absolute;
   left:50%;
   top: 50%;
   z-index: 1;
}

img {
   position: absolute;
   left:50%;
   top: 50%;
   z-index: 2;
}​

  Do It Yourself

What You Should Know at the End of This Lesson

  • You should be able to tell briefly what CSS Positioning is all about.
  • You should be able to identify the four (4) kinds of value for the position property.
  • You should be able to restore an element back to the default position (static).
  • If you enjoyed this lesson, please share.
Previous Chapter

Related Chapters

Related Examples