Explore the utility group that empower you to position elements with respect to other elements, providing enhanced control over the structure and design of your web projects.

About

Positioning Utilities is a class group designed to empower you in precisely positioning elements depending on their parent elements within your projects. With a customizable and responsive structure, these utilities offer a range of features to meet the diverse positioning requirements of your development processes.

In JTB_MD, the classbase for all positioning classes is .jtbPOS.

Core

To set the positioning type of an element, you can add positioning classbase with the relevant type of position to your element as class:

.jtbPOS-[ static | relative | fixed | absolute | sticky ]

This item has a position value that is "static".

                            <!-- position:static example  -->
<p class='jtbPOS-static'>...</p>

Aligning

To position children in your main container with JTB_MD, you can simply add the related alignment class of the library:

.jtbPOS[ T | R | B | L ]-[ 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 ] where:

T represents the top edge,
R represents the right edge,
B represents the bottom edge,
L represents the left edge.

Values in the class represents the percentage values of the main container.

                            <!-- Alignment Examples -->
<div style='position: relative;'>
    <span class='jtbPOSB-0 jtbPOSR-0'></span>
</div>

Unsetting

To unset alignment of an element, you can use:

.jtbPOS[ T | R | B | L ]-unset class.

                                <!-- An element with top unset -->
<div style='position: relative;'>
    <span class='jtbPOST-unset' style='top: 50%;'></span>
</div>

Translating

After assigning a position to an element, you can fine-tune its placement by adding translating classes from JTB_MD:

.jtbPOS-translate-[0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100]

.jtbPOS[X | Y]-translate-[0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100] where:

X for horizontal movement,
Y for vertical movement.
If you don't specify the direction, it defaults to both.

Values in the classes represent the percentages of translation based on the element's dimentions, not the parent container's.

In addition, if you add -neg before the translation value, the library interprets the value as negative:

.jtbPOS-translate-neg-[0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100]

.jtbPOS[X | Y]-translate-neg-[0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100]

                            <!-- Examples -->
<div style='position: relative;'>
    <span class='jtbPOS-absolute jtbPOSB-0 jtbPOSR-0 jtbPOSX-translate-neg-100'></span>
</div>

Responsiveness

It is also possible to use positioning classes basing on the screen size of client. Activate this utility by adding the corresponding screen breakpoint (defined in Breakpoints seciton) at the end of the class with a hyphen (-):

Refer to the table below to understand which parts of the utility group can be used with screen breakers:

Part of group	Responsiveness	Example class
Core	Active	`.jtbPOS-static-xxl`
Alignment	Active	`.jtbPOSB-0-xxl`
Translating	Active	`.jtbPOS-translate-100-xxl`