<h2 class="toc">Position</h2>
<p>The <code>.pos-*</code> classes position elements absolutely inside a relatively positioned element.</p>
<ul>
  <li><code>.pos-tl</code> positions on the top left</li>
  <li><code>.pos-tc</code> positions on the top center</li>
  <li><code>.pos-tr</code> positions on the top right</li>
  <li><code>.pos-cl</code> positions on the center left</li>
  <li><code>.pos-cc</code> positions on the center</li>
  <li><code>.pos-cr</code> positions on the center right</li>
  <li><code>.pos-bl</code> positions on the bottom left</li>
  <li><code>.pos-bc</code> positions on the bottom center</li>
  <li><code>.pos-br</code> positions on the bottom right</li>
</ul>

{% apply view_source %}
<div class="bg-primary d-inline-block position-relative text-white">
  <svg width="250" height="250"></svg>
  <div class="pos-tl overlay-black p-2">.pos-tl</div>
  <div class="pos-tc overlay-black p-2">.pos-tc</div>
  <div class="pos-tr overlay-black p-2">.pos-tr</div>
  <div class="pos-cl overlay-black p-2">.pos-cl</div>
  <div class="pos-cc overlay-black p-2">.pos-cc</div>
  <div class="pos-cr overlay-black p-2">.pos-cr</div>
  <div class="pos-bl overlay-black p-2">.pos-bl</div>
  <div class="pos-bc overlay-black p-2">.pos-bc</div>
  <div class="pos-br overlay-black p-2">.pos-br</div>
</div>
{% end %}

<p>
  The Bootstrap margin utility classes can be applied to these.
  The blocks below use <code>.m-3</code>.
</p>

{% apply view_source %}
<div class="bg-success d-inline-block position-relative text-white">
  <svg width="250" height="250"></svg>
  <div class="pos-tl overlay-black p-2 m-3">.pos-tl</div>
  <div class="pos-tc overlay-black p-2 m-3">.pos-tc</div>
  <div class="pos-tr overlay-black p-2 m-3">.pos-tr</div>
  <div class="pos-cl overlay-black p-2 m-3">.pos-cl</div>
  <div class="pos-cc overlay-black p-2 m-3">.pos-cc</div>
  <div class="pos-cr overlay-black p-2 m-3">.pos-cr</div>
  <div class="pos-bl overlay-black p-2 m-3">.pos-bl</div>
  <div class="pos-bc overlay-black p-2 m-3">.pos-bc</div>
  <div class="pos-br overlay-black p-2 m-3">.pos-br</div>
</div>
{% end %}
{% apply view_source %}
<div class="bg-danger d-inline-block position-relative text-white">
  <svg width="250" height="250"></svg>
  <div class="pos overlay-black p-2 m-3 text-center text-middle">.pos</div>
</div>
{% end %}

<ul>
  <li><code>.pos-t</code> positions on the top</li>
  <li><code>.pos-l</code> positions on the left</li>
  <li><code>.pos-r</code> positions on the right</li>
  <li><code>.pos-b</code> positions on the bottom</li>
  <li><code>.pos-c</code> positions on the center</li>
</ul>

{% apply view_source %}
<div class="bg-info d-inline-block position-relative text-white">
  <svg width="250" height="250"></svg>
  <div class="pos-c overlay-black p-2 text-center">.pos-c</div>
  <div class="pos-t overlay-black p-2 text-center">.pos-t</div>
  <div class="pos-r overlay-black p-2 text-middle">.pos-r</div>
  <div class="pos-b overlay-black p-2 text-center">.pos-b</div>
  <div class="pos-l overlay-black p-2 text-middle">.pos-l</div>
</div>
{% end %}

<p>
  The Bootstrap margin utility classes can be applied to these.
  The blocks below use <code>.m-3</code>.
</p>

{% apply view_source %}
<div class="bg-warning d-inline-block position-relative text-white">
  <svg width="250" height="250"></svg>
  <div class="pos-t overlay-black p-2 m-3 text-center">.pos-t</div>
  <div class="pos-r overlay-black p-2 m-3 text-middle">.pos-r</div>
  <div class="pos-b overlay-black p-2 m-3 text-center">.pos-b</div>
  <div class="pos-l overlay-black p-2 m-3 text-middle">.pos-l</div>
</div>
{% end %}
