Up until this point, we have understood that every element could be given two specific dimensions: width and height. But what about the third dimensions? That’s right, y’all. We can now apply or change the depth of an element. This is also known as z-index. z-index is a property you can change in your stylesheet.

You can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number. The method is relatively simple but the possibilities are several. You can place images on text or text above text etc.

Just note before applying a z-index, you must have declared a position type. Look at the example below of what your markup could look like:

     property: relative;
     z-index: 2;

Download our in-class example.

Tweet