CSS Layers

CSS Layers

CSS gives you opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.

The z-index property is used alongwith positionproperty to create an effect of layers. You can specify which element should come on top and which element should come at bottom.

A z-index property can help you to create more complex webpage layouts. Following is the example which shows how to create layers in CSS.

<div style="background-color:red;

        width:300px;

        height:100px;

        position:relative;

        top:10px;

        left:80px;

        z-index:2">

</div>

<div style="background-color:yellow;

        width:300px;

        height:100px;

        position:relative;

        top:-60px;

        left:35px;

        z-index:1;">

</div>

<div style="background-color:green;

width:300px;

        height:100px;

        position:relative;

        top:-220px;

        left:120px;

        z-index:3;">

</div>

This will produce following result:

ليست هناك تعليقات:

إرسال تعليق