How To Add 'important' To Zindex

I have conflict between some add-ons on my site. Using Firebug, I noticed that if I add '!important' to the z-index I can avoid the conflict. but the z-index value is set using Jav

Solution 1:

I received the answer in another thread - How to add 'if' to jQuery chain code

use -

.each(function() {
    this.style.cssText+= 'z-index: '+(parseInt($(this).css('z-index'))+1)+' !important';
  })

but after struggling with the code in several functions, I preferred to add a class and a rule to this class -

this.menu = $("<ul>")
  .addClass("ui-autocomplete")
  .addClass("ui-autocomplete-hover-header")  // !! added!
. . .

.ui-autocomplete.ui-autocomplete-hover-header {  
  z-index: 5004 !important; }

Solution 2:

I think i got this

this.menu = $("<ul>")
   .addClass("ui-autocomplete")
   .appendTo(this.document.find(this.options.appendTo || "body")[0])
//   .zIndex(this.element.zIndex() + 1)  // !! <- here // !!
   .style.setProperty ("zIndex", zIndex()+1, "important");
   .hide()
   .data("menu");

Solution 3:

Why not using css to this? For example

this.menu = $('<ul class="high-zindex">')....

and then define .high-zindex { z-index: 9999 !important }

Solution 4:

Try this out.

.zIndex(this.element.zIndex() + 1 + '!important')