Layer means peace of Html display on a top of the page with in pixel Format.
To Define the one layer you have to first set it’s position and width and height.
For example:-
div.layer1 {
background-color:lime;
width:150px;
height:150px;
position:relative;
top:10px;
left:80px;
z-index:4
}
Example of Vertical Menu in CSS Beautiful Vertical Menu Using CSS
OverLaps Layer with Each Other in CSS Display Layer on EachOther or OverLaps Layer
In this example we are create three layer and each layer are overlaps with each other.
Example:-
<html>
<head>
<style type="text/css">
div.layer1 {
background-color:lime;
width:150px;
height:150px;
position:relative;
top:10px;
left:80px;
z-index:4
}
div.layer2 {
background-color:yellow;
width:100px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1
}
div.layer3 {
background-color:orange;
width:120px;
height:120px;
position:absolute;
top:0px;
left:50px;
z-index:0
}
</style>
</head>
<body>
<div class="layer1">
Layer One<br>
Layer One<br>
Layer One<br>
Layer One<br>
Layer One<br>
</div>
<div class="layer2">
Layer Two<br>
Layer Two<br>
Layer Two<br>
Layer Two<br>
Layer Two<br>
</div>
<div class="layer3">
Layer Three<br>
Layer Three<br>
Layer Three<br>
Layer Three<br>
Layer Three<br>
</div>
</body>
</html>
0 comments:
Post a Comment