Overlap positioning

In order to provide our users with the full power to move the overlap-child divs freely, we implemented 2 sets of positioning classes. These 2 sets of positioning classes were built based on different units:

  • by absolute unit: pixel (px), and
  • by relative unit: percentage (%)

Absolute positioning classes

Pixel (px) is an absolute sizing unit, as their values are fixed regardless of the viewport size. These classes are named using the format {side}-{size}, such as .t-1 or .b-4.

Where side is one of:

  • t - for classes that set top
  • b - for classes that set bottom
  • l - for classes that set left
  • r - for classes that set right

Where size is one of:

  • 0 - to eliminate spacing by setting it to 0px
  • 1 - to set the spacing to 10px
  • 2 - to set the spacing to 20px
  • 3 - to set the spacing to 30px
  • 4 - to set the spacing to 40px
  • 5 - to set the spacing to 50px
 

Example: using .b-1

placeholder

Lorem ipsum dolor sit amet

Code structure

                            <div class="overlap">
                                <img class="w100 ratio-16-9" src="...">
                                <h3 class="bg-black p-2 b-1 overlap-child">
                                    Lorem ipsum dolor sit amet
                                </h3>
                                //this overlap-child div has a 10px padding from the bottom.
                            </div>

Relative positioning classes

Percentage (%) is a relative sizing unit, as it shows the relevancy with its parent element. These classes are named using the format {side}-{size}, such as .r-10 or .l-30.

Where side is one of:

  • t - for classes that set top
  • b - for classes that set bottom
  • l - for classes that set left
  • r - for classes that set right

Where size is one of:

  • 10 - to set the spacing to 10%
  • 20 - to set the spacing to 20%
  • 30 - to set the spacing to 30%
  • 40 - to set the spacing to 40%
  • 50 - to set the spacing to 50%
  • 60 - to set the spacing to 60%
  • 70 - to set the spacing to 70%
  • 80 - to set the spacing to 80%
  • 90 - to set the spacing to 90%
  • 100 - to set the spacing to 100%
 

Example: using .r-10 .b-0

placeholder

Lorem ipsum dolor sit amet

Code structure

                            <div class="overlap">
                                <img class="w100 ratio-16-9" src="...">
                                <h3 class="bg-black p-2 r-10 b-0 overlap-child">
                                    Lorem ipsum dolor sit amet
                                </h3>
                                //this overlap-child div has a 10% padding from the right and bottom-aligned.
                            </div>

Use cases

For readers who are new to the concept of absolute and relative sizing, we've included a side-by-side comparison to demonstrate the difference between these 2 units.

Reduce the screen size to see how relative sizing is changing its spacing based on the viewport size. *When the screen size is < 992px, the responsive mode of the overlap class will be triggered, and all overlap child divs will be vertically aligned below the parent class.

Using absolute positioning classes: .r-1 .b-0

placeholder

Lorem ipsum dolor sit amet

10px spacing from the right (r-1) and bottom-aligned (b-0)

Using relative positioning classes: .r-10 .b-0

placeholder

Lorem ipsum dolor sit amet

10% spacing from the right (r-10) and bottom-aligned (b-0)