<div class="container">
  <p>The following colored squares are positioned. The green square is positioned absolutely in its containing block which is its parent with grey borders. It is offset by -30px to the right and -30px to the top, which means it is pulled upwards relative to the edge of its parent.</p>
  <p>
    The pink square is offset by 20px from the top relative to its original position in the flow, and 20px to the left.
  </p>
  <div class="element">
    <div class="child absolute"></div>
    <p>Lorem ipsum dolor sit amet, <span class="child relative"></span>consectetur adipisicing elit. Labore, itaque, quibusdam iusto deserunt officiis dolore ipsum! Aliquid, at, repellat adipisci quo et minima expedita sint nemo doloribus debitis sit corporis.</p>
  </div>
  <p>
    The following element has a top offset of <code>auto</code>. It is to be positioned according to the <code>bottom</code> offset property. If the bottom offset is not set in this case, it defaults to <code>auto</code>, and the element is not offset at all. The <code>bottom</code> offset is set to 10px so the elemnet is positioned 10px above the bottom edge of its containing block. Try setting horizontal offset vaules and/or setting a bottom offset to <code>auto</code> see how that changes the position of the element.
  </p>
  <div class="element">
    <div class="child auto"></div>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  border: 2px solid grey;
  min-height: 250px;
  margin-bottom: 30px;
  background-color: white;
  /* establish a positioning context */

  position: relative;
}

.child {
  height: 150px;
  width: 150px;
}

.absolute {
  position: absolute;
  top: -30px;
  right: -30px;
  background-color: #009966;
  opacity: .75;
}

.relative {
  display: inline-block;
  /* so that it accepts a height and width */

  height: 150px;
  width: 150px;
  position: relative;
  /* establish a positioning context for itself */

  top: 20px;
  left: 20px;
  background-color: deepPink;
  opacity: .75;
}

.auto {
  background-color: #006699;
  opacity: .75;
  position: absolute;
  top: auto;
  bottom: 10px;
}