CSS z-index – Overlap html element with different depth

CSS z-index – Overlap html element with different depth. z-index is one of the important css element, which concerns with the layers layout of a web page. Here Layer can be defined as a single thickness of some element covering a surface. If you put one layer above another, then the below layer would be hidden by the above layer. Z-index is also based on this concept. Or you can also compare x,y and z coordinates, where x and y represent plane and z indicates the depth. In other words it determines the stack level of HTML element. But remember, z-index works only when you define the position of that element i.e position as relative, absolute or fixed.

CSS z-index - Overlap html element with different depth
CSS z-index – Overlap html element with different depth

z-index is supported by all major browsers. z-index take positive value. The more the positive value is, means, that element will hide or overlap with the other elements of html. Here is the syntax of declaring z-index in css sytle sheet.

#zvalue{
	z-index : 1;
	position : absolute;
}

where zvalue is an id of one of the html element.
Let us have an example of putting a static html label text over an image. Here is the html code for the same:

CSS z-index – Overlap html element with different depth

<html>
<head>
<title>
css z index
</title>
</head>
<body>

<div id="image" style=" z-index: 1; position: relative;">
	<img src="css z-index.png" alt="z-index" >
</div>

<div id="label" style="margin: -133px 0px 0px 50px; z-index: 1; font-size: 40px; position: fixed;">
	z - index
</div>

</body>
</html>

Output of CSS z-index – Overlap html element with different depth

case 1 : For the above written code –

CSS z-index - Overlap html element with different depth
CSS z-index – Overlap html element with different depth

case 2 : If we will change the style value of id=”label” with z-index:2

CSS z-index - Overlap html element with different depth
CSS z-index – Overlap html element with different depth

Hope this helps to uplift one element over other in CSS with z-index. If you find any problem, then do comment below.