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 topb- for classes that set bottoml- for classes that set leftr- for classes that set right
Where size is one of:
0- to eliminate spacing by setting it to 0px1- to set the spacing to 10px2- to set the spacing to 20px3- to set the spacing to 30px4- to set the spacing to 40px5- to set the spacing to 50px
Example: using .b-1
Lorem ipsum dolor sit amet
<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 topb- for classes that set bottoml- for classes that set leftr- 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
Lorem ipsum dolor sit amet
<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
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
Lorem ipsum dolor sit amet
10% spacing from the right (r-10) and bottom-aligned (b-0)