CSS Tutorial 15: CSS Layer on layer with z-index

CSS operates in three dimensions – peak, width and depth. We have now visible the first two dimensions in earlier lessons. In this lesson, we can be trained tips on how to let distinctive factors end up layers. In short, this means the order of which the elements overlap one a further. CSS Layer on layer with z-index

CSS Tutorial 15: CSS Layer on layer with z-index

For that intent, that you may assign each and every detail a number (z-index). The procedure is that an element with a larger number overlaps an aspect with a cut back quantity.

Let us say we are playing poker and have a royal flush. Our hand may also be offered in a method where every card has bought a z-index:figure-css-tech-frk


On this case, the numbers comply with on a different (1-5) however the equal outcomes can also be bought via making use of 5 distinctive numbers. The fundamental thing is the chronological sequence of the numbers (the order).

The code in the card example could look like this:

	#ten_of_diamonds {
		position: absolute;
		left: 100px;
		top: 100px;
		z-index: 1;

	#jack_of_diamonds {
		position: absolute;
		left: 115px;
		top: 115px;
		z-index: 2;

	#queen_of_diamonds {
		position: absolute;
		left: 130px;
		top: 130px;
		z-index: 3;

	#king_of_diamonds {
		position: absolute;
		left: 145px;
		top: 145px;
		z-index: 4;

	#ace_of_diamonds {
		position: absolute;
		left: 160px;
		top: 160px;
		z-index: 5;

The procedure is reasonably simple however the prospects are a number of. That you could place portraits on text or text above textual content etc.


Layers can be used in lots of instances. For instance, try to use z-index to create effects in headlines rather of making these as snap shots. For one factor, it is rapid to load textual content and for another, it presents a possibly higher rating in serps.