Using top and left to create offset : top « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. top

Using top and left to create offset

   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>CSS Positioning Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
div#layer1 {
  z-index:3;
  position:absolute;
  top:10px; 
  left:10px;
  width:200px;
  height:100px;
  background-color:#ffffff;
  border:1px solid #000000;
  padding:5px;}

div#layer2 {
  z-index:2;
  position:absolute;
  top:20px; 
  left:20px;
  width:200px;
  height:100px;
  background-color:#ffffff;
  border:1px solid #000000;
  padding:5px;}

div#layer3 {
  z-index:1;
  position:absolute;
  top:30px; 
  left:30px;
  width:200px;
  height:100px;
  background-color:#ffffff;
  border:1px solid #000000;
  padding:5px;}
</style>


</head>

<body>
  <div id="layer1"><h1>Layer One</h1></div>
  <div id="layer2"><h1>Layer Two</h1></div>
  <div id="layer3"><h1>Layer Three</h1></div>
</body>

</html>








Related examples in the same category

1.'top' Example
2.top: 100px
3.When the top and bottom offset properties are applied to the same element, height is implied.
4.top:-100px;
5.Use 'top' to offset the top of an element from the top of its position.
6.top aligns the top side of an absolute element to the top side of its container.
7.Body top left position
8.Offset Relative
9.Relative offset indent
10.Absolute Outside its parent on the Bottom Left with 100% top
11.Absolute position with top, right and bottom
12.Relative block to top and left
13.position: relative and top left offset
14.top: -100px
15.Relative negative top offset