Sometimes in order to achieve more complex layouts, you may want to stack HTML elements on top of one another, similar to a deck of cards.

Whatever the reason, it is a useful trick to know, so today I will show you how to do just that.

The problem

How to stack HTML elements on top of one another as shown in the image below.

To achieve this task we have to make use of the CSS properties position and z-index.

So before seeing the solution lets firsts understand these properties a bit better, as they are very useful and I think often misunderstood.

The CSS position property

The position property specifies the type of positioning method to use for an HTML element:

1. position: static; – This is the default positioning of HTML elements. An element positioned with static follows the normal flow of the HTML page, such an element is also not affected by the top, right, bottom and left properties. In most cases, it is redundant to use it explicitly.
2. position: relative; – This has the same default behavior like position: static. However, HTML elements with position: relative are affected by the top, right, bottom and left properties.
3. position: fixed; – Elements that use this positioning value are positioned relative to the viewport and are affected by the top, right, bottom and left properties. Also, a fixed element is not affected by the page scrolling.
4. position: absolute; – This is probably the most interesting positioning value. An HTML element is positioned relative to the nearest positioned ancestor. What does this mean? Well, nearest positioned ancestor means that such an element exists and has positioning set with a value other than static. Also if an absolute positioned element has no positioned ancestors, it uses the document body and moves along with page scrolling.

The strength of position: absolute can be seen by using it together with a nearest positioned ancestor preferably with position: relative.

Normally you would use a div element with position: relative as the wrapper for elements with position: absolute.

See the examples below where we have a container div and some children divs represented by layers:

<div class="container">

  <div class="layer layer1">
    Layer 1
  </div>

  <div class="layer layer2">
    Layer 2
  </div>

  <div class="layer layer3">
    Layer 3
  </div>

  <div class="layer layer4">
    Layer 4
  </div>

</div>

The container is the wrapper and uses relative positioning while its children use absolute positioning:

.container {
  position: relative;
}

.layer {
  position: absolute;
  height: 5em;
  width: 10em;
  text-align: center;
}

.layer1 {
  z-index: 1;
  left: 1em;
  top: 1em;
  background-color: #FFE6CC;
}

.layer2 {
  z-index: 2;
  left: 2em;
  top: 2em;
  background-color: #FFF2CC;
}

.layer3 {
  z-index: 3;
  left: 3em;
  top: 3em;
  background-color: #F8CECC;
}

.layer4 {
  z-index: 4;
  left: 4em;
  top: 4em;
  background-color: #E1D5E7;
}

Now the children divs, layers, will position themselves based on the nearest positioned ancestor, which is the container in this case.

If you move the container by using the top, right, bottom and left properties, its children will always position themselves relative to the container.

So this is the power of the CSS position property and especially with its value absolute.

The CSS z-index property

Positioned elements can overlap or stack on top of each other.

We have already talked about positioning and now it is time to talk about overlapping and stacking.

The z-index property specifies the overlap, stack, order of HTML elements. Its values are numeric and also accepts negative numbers.

So an element with a z-index value of 2 will stack on top of an element with a z-index value of 1 and so forth.

The solution

Lessons learned

I have often encountered situations in which CSS properties like position and z-index are used, especially position, therefore understanding them is mandatory if you are serious about web development. Knowing and understanding them will bring significant improvements to your HTML layouts and designs.

You usually use the z-index property together with the position property.

Spread the knowledge