Since we have basic understandings of the concepts of Z-index in previous series, we know how to implement them in creative ways in modern responsive web designing. In CSS, we have different contexts in form of different sets of elements. Thus, we can arrange their stacking orders in relative to their own sets of contextual elements. In this post, I would like to mention something more than CSS alone like JavaScript and SASS or LESS.
Z-index for Dynamic Elements
JavaScript is use for dynamic purposes and Z-index can apply dynamically in JavaScript syntax, which is somewhat similar in format. In JavaScript Z-index properties, you have ot use “camel casing” instead of hyphenated CSS properties. Thus, your “z-index” will become “zIndex”. For instance, look at the code example below:
var myElement = document.getElementById("gold_box"); myElement.style.position = "relative"; myElement.style.zIndex = "9";
Z-index for Sassy Elements
Today in cloud computing age, we are highly depending on SASS or LESS and the syntax of SASS is quite simple for stacking orders. They are call SASS list like:
$elements: project-covers, sorting-bar, modals, navigation;
Here the order of elements are deciding the stacking order in the appearance of the elements. In simple words, from lowest to highest z-index assign to each element in the order. For instance, in above example “project-cover” element will return “z-index: 1” and “navigation” would “z-index: 4”.
It is true that this simplification in order pave ways to add any element in between the other elements and z-index of all elements would automatically updated according to their new orders. For example, if we want to add user-tooltip just after the project-cover element, we simply have to add that class “.user-tooltip” in the SASS order in following ways.
$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;
Thus, entire syntax would be:
.project-cover {
z-index: 1;
}
.user-tooltip {
z-index: 2;
}
.sorting-bar {
z-index: 3;
}
.modal {
z-index: 4;
}
.navigation {
z-index: 5;
}
Fortunately, we can go for many complex layouts using multiple contexts and stacking orders. This is possible due to possibilities to create a new stacking order for each stacking context by giving any children of the element a stacking order specific to its parents. For sake of better understanding, lets add children elements to the one of the main element of the list “modals” in following way.
$elements: project-covers, user-tooltip, sorting-bar, modals, navigation; $modal-elements: fields, form-controls, errors, autocomplete-dropdown;
Therefore, resulting z-index would generate following ways in compiler:
.modal {
z-index: 4;
}
.modal .field {
z-index: 1;
}
.modal .form-controls {
z-index: 2;
}
.modal .error {
z-index: 3;
}
.modal .autocomplete-dropdown {
z-index: 4;
}
Thus, using hard-core values for z-index like 999 or 99999 may prove fatal in CSS so stacking order creation in SASS may prove beneficial for long-term integrity and collaboration if we save the above SASS file as “_zindex.scss” and call these global orders in your specific CSS files as per needs.
Show Creativity with Z-Index
There are many practical implementations of z-index properties of CSS such as:
- In case of overlapping tabbed navigation
- For CSS Tooltips
- For light box
- For drop-down menu
- In photo gallery effects
- In layered layout enhancements
- For fancy social bookmarking boxes
- To create perfect full page background image
- And in many more innovative ways
Expert web programmers at Lujayn know how to go creatively using latest CSS technologies like z-index to create 3D effects dynamically.
Best Joomla Development Company 