Scribd
Upload
1 views

CSSLayers

CSS layers allow for the creation of overlapping elements using the z-index property in conjunction with the position property. This enables developers to control the stacking order of elements on a webpage, facilitating more complex layouts. An example is provided demonstrating how to implement layers with different z-index values for three colored divs.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views

CSSLayers

CSS layers allow for the creation of overlapping elements using the z-index property in conjunction with the position property. This enables developers to control the stacking order of elements on a webpage, facilitating more complex layouts. An example is provided demonstrating how to implement layers with different z-index values for three colored divs.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

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 along with the position property 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.

<html>

<head>

</head>

<body>

<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>

</body>

</html>

It will produce the following result −

You might also like