Relative negative top offset : top « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. 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>








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.Using top and left to create offset
6.Use 'top' to offset the top of an element from the top of its position.
7.top aligns the top side of an absolute element to the top side of its container.
8.Body top left position
9.Offset Relative
10.Relative offset indent
11.Absolute Outside its parent on the Bottom Left with 100% top
12.Absolute position with top, right and bottom
13.Relative block to top and left
14.position: relative and top left offset
15.top: -100px