<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 top and -30px to the left, which means it is pulled to the outside of the left edge of its parent.</p>
  <p>
    The pink square is offset by 20px up from the left relative to its original position in the flow, and 20px upwards from the bottom.
  </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 left offset of <code>auto</code>. It is to be positioned according to the <code>right</code> offset property. If the right offset is not set in this case, it defaults to <code>auto</code>, and the element is not offset at all. The <code>right</code> offset is set to 10px so the element is positioned 10px to the left relative to the right edge of its containing block. Try setting vertical offset vaules and/or setting a right 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;
  left: -30px;
  top: -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 */

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

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