Relative negative top offset : top : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » top »

Relative negative top 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 rel="stylesheet" type="text/css">
div,h1,p {
  border: 1px solid #000;
  margin: 5px;
}

div {
  width: 350px;
}

p {
  width: 300px;
}

div#page2 {
  position: relative;
  top: -100px;
  left: 20px;
}
</style>
</head>

<body>
  <div id="page1">
    <h1>This is the heading</h1>
    <p>Here is paragraph one.</p>
    <p>Here is paragraph two.</p>
    <p>Here is paragraph three.</p>
  </div>

    <div id="page2"> 
        <h1>This is the heading</h1>
        <p>Here is paragraph one.</p>
        <p>Here is paragraph two.</p>
        <p>Here is paragraph three.</p>
    </div>
</body> 

</html>