How to overwrite z-index for one of the select2.js element?

Question

I have 4 elements (element 1 is in fixed header and elements 2,3,4 in my form) of which i have applied select2 (customisable select box with support for searching). but elements 2,3,4 are overlapping the element 1, i need to set z-index only for the element 1, if i change it in select2.js, it is applied for all the elements, so the element 1 should be on top of elements 2,3,4

Answer 1

Instead of changing the z-index directly in select2.js specify a class with a better specificity.

.nav-bar .select-box {
   z-index: 
}

*where nav-bar has to be replaced with the id or classname of the navigation bar that you have specified and select-box is the class specified for that select box.