CSS Layers

CSS Layers

In CSS, layers refer to applying the z-index property to elements that overlap with each other.

The z-index property, when used in conjunction with the position property, enables you to specify which element should appear on top in the event of an overlap. An overlap can easily occur when using the position property, and this is often desirable when creating advanced layouts.

Example code:

<div style="background-color:red;
    width:100px;
    height:100px;
    position:relative;
    top:10px;
    left:80px;
    z-index:2;">
</div>
<div style="background-color:yellow;
    width:100px;
    height:100px;
    position:relative;
    top:-60px;
    left:35px;
    z-index:1;">
</div>

This results in: