<div class="wrapper">
  <div class="margin">
    Margin
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Rutrum quisque non tellus orci. Rhoncus urna neque viverra justo nec ultrices. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. A diam sollicitudin tempor id eu nisl nunc mi. Facilisis mauris sit amet massa. Aliquet risus feugiat in ante metus dictum. Adipiscing commodo elit at imperdiet dui accumsan sit amet. Non odio euismod lacinia at quis risus sed. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Urna neque viverra justo nec ultrices dui sapien eget. Urna neque viverra justo nec. Bibendum arcu vitae elementum curabitur vitae nunc sed. Lectus nulla at volutpat diam ut venenatis tellus in metus. Enim ut sem viverra aliquet eget sit amet tellus cras. Pulvinar proin gravida hendrerit lectus. A erat nam at lectus urna duis convallis convallis tellus. Dolor sit amet consectetur adipiscing elit ut. Quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
<div class="wrapper">
  <div class="relative">
    Relative
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Rutrum quisque non tellus orci. Rhoncus urna neque viverra justo nec ultrices. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. A diam sollicitudin tempor id eu nisl nunc mi. Facilisis mauris sit amet massa. Aliquet risus feugiat in ante metus dictum. Adipiscing commodo elit at imperdiet dui accumsan sit amet. Non odio euismod lacinia at quis risus sed. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Urna neque viverra justo nec ultrices dui sapien eget. Urna neque viverra justo nec. Bibendum arcu vitae elementum curabitur vitae nunc sed. Lectus nulla at volutpat diam ut venenatis tellus in metus. Enim ut sem viverra aliquet eget sit amet tellus cras. Pulvinar proin gravida hendrerit lectus. A erat nam at lectus urna duis convallis convallis tellus. Dolor sit amet consectetur adipiscing elit ut. Quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
<div class="wrapper">
  <div class="absolute">
    Absolute
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Rutrum quisque non tellus orci. Rhoncus urna neque viverra justo nec ultrices. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. A diam sollicitudin tempor id eu nisl nunc mi. Facilisis mauris sit amet massa. Aliquet risus feugiat in ante metus dictum. Adipiscing commodo elit at imperdiet dui accumsan sit amet. Non odio euismod lacinia at quis risus sed. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Urna neque viverra justo nec ultrices dui sapien eget. Urna neque viverra justo nec. Bibendum arcu vitae elementum curabitur vitae nunc sed. Lectus nulla at volutpat diam ut venenatis tellus in metus. Enim ut sem viverra aliquet eget sit amet tellus cras. Pulvinar proin gravida hendrerit lectus. A erat nam at lectus urna duis convallis convallis tellus. Dolor sit amet consectetur adipiscing elit ut. Quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>

.wrapper {
  position: relative;
  max-width: 40em;
  margin: 1em auto;
  outline: 1px black solid;
}
.wrapper div {
  padding: 2em;
  font-size: 3em;
  color: white;
}
.margin {
  margin-top: 100px ;
  margin-left: 100px;
  background: red;
}
.relative {
  position: relative;
  top: 100px;
  left: 100px;
  background: green;
}
.absolute {
  position: absolute;
  top: 100px;
  left: 100px;
  background: blue;
}