<main class="main container">
  <section class="section position-absolute">
    <h2><code>position: absolute;</code></h2>
    <div class="box absolute"></div>
    <p>The above box has <strong><code>position: absolute;</code></strong></p>
  </section>
  <p>The <code>div.absolute</code> element is taken <em>out</em>of the normal flow of document.</p>
  <p>Then the element is placed <em>in it's original position</em> unless values of <code>top, right, left, bottom</code> are specified.</p>
  <p>In the above example, the box is placed <br />
    <strong style="display: inline-block; margin-top: 0.1rem; padding: 0.5rem 1rem; background-color:yellowgreen;">
      <code>
        div.absolute {
        position: absolute;
        z-index: -1;
        }
      </code>
    </strong>
  </p>
  <p><strong>NOTE:</strong> See how the other elements ignore the blue box, and behave as if it is not present.</p>
</main>

<main class="main container">
  <hr />
  <section class="section position-absolute" style="margin-top: 4rem;">
    <p>Check out the gray box in the left. It has a class <em><code>absolute-two</code></em> and has <code>position: absolute;</code>.</p>
    <p>The height for this element is not mentioned, and is calculated by values from top and bottom.</p>
    <p>Notice how the gray box is placed relative to the document as there is no closest positioned ancestor.</p>
    <div class="box absolute-two"></div>
  </section>
  <p>In this example, the box is placed <br />
    <strong style="display: inline-block; margin-top: 0.1rem; padding: 0.5rem 1rem; background-color:yellowgreen;">
      <code>
        div.absolute-two {
        position: absolute;
        left: 2em
        right: 0%;
        bottom: 0;
        }
      </code>
    </strong>
  </p>
</main>

<main class="main container">
  <hr />
  <section class="section position-absolute position-relative" style="margin-top: 4rem;">
    <p>Check out the red box within this box. It has a class <em><code>absolute-three</code></em> and has <code>position: absolute;</code>.</p>
    <p>Notice how the red box is placed relative to the parent (section with skyblue color).</p>
    <div class="box absolute-three"></div>
  </section>
  <p>In this example, the box is placed <br />
    <strong style="display: inline-block; margin-top: 0.1rem; padding: 0.5rem 1rem; background-color:yellowgreen;">
      <code>
        section.position-relative {
        position: relative;
        }<br />
        div.absolute-three {
        position: absolute;
        right: 25%;
        bottom: 0;
        }
      </code>
    </strong>
  </p>
</main>

.main {
  margin-bottom: 3rem;
}

.main > p {
  margin: 1rem 0 0 0;
  text-align: center;
  font-size: 1.1rem;
}

.section {
  padding: 1rem;
  margin: 2rem auto;
  max-width: 400px;
  background-color: lightskyblue;
  /* text-align: center; */
  color: white;
  max-width: 100%;
}

.section h2 {
  font-size: 1.3rem;
  background-color: darkgreen;
  padding: 1rem;
}

.section p {
  font-size: 1.1rem;
  background-color: darkgreen;
  padding: 1rem;
}

.section .box {
  background-color: navy;
  width: 200px;
}

section.position-relative {
  position: relative;
  top: 0;
}

section.position-absolute .absolute {
  position: absolute;
  z-index: -1;
  height: 200px;
}

section.position-absolute .absolute-two {
  position: absolute;
  left: 2em;
  top: 0;
  bottom: 0;
  background-color: gray;
}

section.position-relative .absolute-three {
  background-color: #ff00009a;
  height: 100px;
  right: 25%;
  position: absolute;
  bottom: 0;
}