Position

  View in Github

Helpers for quickly setting position, z-index, and top.

.l-pos-rel
position: relative

  <div style="border: 1px solid #000; width: 300px; height: 100px;">
    <span class="l-pos-rel" style="background-color: #222; color: #fff; padding: 10px;">position: relative</span>
  </div>
.l-pos-abs
position: absolute; Set .l-pos-rel on the parent to place within a defined space.


  <div class="l-pos-rel" style="border: 1px solid #000; width: 300px; height: 100px;">
    <span class="l-pos-abs" style="background-color: #222; color: #fff; padding: 10px; bottom: 0; right: 0; width: 60%;">position: absolute;</span>
  </div>
RepoCountLocation(s)
texastribune 1
List
.l-pos-sticky
position: sticky; Read more in CSS tricks



  <div class="l-pos-sticky l-pos-top l-pos-front" style="background-color: #222; color: #fff; padding: 10px; width: 60%;">
    position: sticky; top: 0;
  </div>
This class isn't referenced anywhere
.l-pos-top
top: 0




  <div class="l-pos-rel" style="border: 1px solid #000; width: 300px; height: 100px;">
    <span class="l-pos-top l-pos-abs" style="background-color: #222; color: #fff; padding: 10px;">top: 0</span>
  </div>
This class isn't referenced anywhere
.l-pos-front
z-index: 1





  <div class="l-pos-rel" style="border: 1px solid #000; width: 300px; height: 100px;">
    <span class="l-pos-front l-pos-abs" style="background-color: #222; color: #fff; padding: 10px; top: 20px; left: 20px;">z-index: 1</span>
    <span style="background-color: #999; color: #fff; padding: 10px; l-pos-abs">z-index: not set</span>
  </div>
This class isn't referenced anywhere