Use inline style to control the absolute position : position absolute : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » position absolute »

Use inline style to control the absolute position


 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Using Absolute Positioning</title>
    <style type="text/css" rel="stylesheet" >
p {
  border-width: thin;
  border-style: solid; 
  height: 100px; 
  width: 100px;
  text-align:center
}
    </style>
  </head>
  <body>
    <p style="background-color: red; position: absolute; top: 100px; left: 0;">
      Container 1
    </p>
    <p style="background-color: white; position: absolute; top: 100px;left: 150px;">
      Container 2
    </p>
    <p style="background-color: blue; position: absolute; top: 100px;left: 300px;">
      Container 3
    </p>
  </body>
</html>