Using Relative Positioning : position relative : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » position relative »

Using Relative Positioning


 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Using Relative Positioning</title>
    <style type="text/css" rel="stylesheet">
p {
   border-width: thin;
   border-style: solid; 
   height: 100px; 
   width: 100px;
   text-align:center
}
p.red {
    background-color: red; 
    position: relative; 
    left: 0;
}

p.white {
    background-color: white; 
    position: relative; 
    top: -100px;
    left: 50px;
}

p.blue {
     background-color: blue; 
     position: relative; 
     top: -200px;
     left: 100px;
}
    </style>
  </head>
  <body>
    <p class="red">
      Container 1
    </p>
    <p class="white">
      Container 2
    </p>
    <p class="blue">
      Container 3
    </p>
  </body>
</html>