The z-index property is vital when trying to be competitive in today’s design market. It allows you to create layers which you can use to make pretty awesome designs.

Step By Step Instructions:

1. In the header section (or an external style sheet), create 2 Div CSS classes such as the ones below.

.relativeDiv{position:relative; width:800px; height:500px; margin-right:auto; margin-left:auto; margin-top:20px; background-color:#0000FF;}
.absoluteDiv{position:absolute; width:300px; height:200px; margin-left:400px; margin-top:50px; background-color:#000000; z-index:2;}

2. Next create the divs and call on their classes in the body section.

<div class="secondDiv"></div>
<div class="myDiv"></div>

It’s honestly as simple as that. The Z-Index property and the position property are probably the most useful css properties in the web development industry. Let me know in the comments section if this short little tutorial helped you.