Tuesday, 5 April 2016

layer in css

<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:-36px;
     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>

No comments:

Post a Comment