Unlock the secrets of element stacking and visual hierarchy of JTB_MD. Control the depth and order of your components, gain insights into crafting visually stunning web interfaces.
To make all elements and components of JTB_MD work as a whole, there is a layering system defined in the styling process. Each element has its own layer power to not clash with others visually. With the power of z-index, the library aims to provide a seamless user experience.
You can explore the comprehensive list of JTB_MD's z-index values below to empower your design:
| Element | Form | Z-Index | Explanation |
|---|---|---|---|
| jtbDropdown | - | -1 |
The hidden form of dropdown containers. |
| jtbModal | - | -1 |
The hidden form of modal elements. |
| jtbTooltip | - | -1 |
The hidden form of tooltip containers. |
| jtbNavbar | .jtbNavbar-fixed-top |
1100 |
The navbar form that fixes itself to top of the viewport. |
.jtbNavbar-fixed-bottom |
1100 |
The navbar form that fixes itself to bottom of the viewport. | |
.jtbNavbar-sticky |
1100 |
The navbar form that fixes itself to top of the viewport on scrolling. | |
| jtbNavbar-collapse | - | 1101 |
The collapsible area of navbar that holds contents on smaller screens. |
.open |
1102 |
Open form of collapsible area. |
| jtbModal | .show |
1200 |
The visible form of modal elements. |
| jtbDropdown | .show |
1400 |
The shown form of dropdown containers. |
| jtbTooltip | .show |
1400 |
The shown form of tooltip containers. |
| jtbToast-area | - | 1500 |
The content area where .jtbToast elements place in. |
| jtbToast | - | 1500 |
The toast element itself by default. |
Stacked, Top edge, Third child |
1501 |
The third toast child that positioned in one of the top areas on stacked form. | |
Stacked, Bottom edge, Third-last child |
1501 |
The third-last toast child that positioned in one of the bottom areas on stacked form. | |
Stacked, Top edge, Second child |
1502 |
The second toast child that positioned in one of the top areas on stacked form. | |
Stacked, Bottom edge, Second-last child |
1502 |
The second-last toast child that positioned in one of the bottom areas on stacked form. | |
Stacked, Top edge, First child |
1503 |
The first toast child that positioned in one of the top areas on stacked form. | |
Stacked, Bottom edge, Last child |
1503 |
The last toast child that positioned in one of the bottom areas on stacked form. |
Copyright © 2024 JTBLabs - All rights reserved.