title: How to add !important to class
body: <p>My drop down menu hides behind the modal(I am using bootstrap Modal) and I tried several ways to fix the problem but none of them works. Here is the code:</p>
  
  <pre><code>&lt;ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all"
  id="ui-id-2" tabindex="0" style="display: none; top: 813px; left: 76px; width: 239px;"&gt;
  &lt;li&gt;....&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My autocomplete css is:</p>
  
  <pre><code>.ui-autocomplete {
  border:1px solid #b2b8bd;
  font-size: .750em;
  max-height: 300px;
  overflow-y: auto;
  z-index:9999;
  }
  </code></pre>
  
  <p>However in my other scss file, I defined <code>$zindex-modal-background:  1040 !default;</code> and the definition for ui-front is</p>
  
  <pre><code>.ui-front {
  z-index: $zindex-modal-background;}
  </code></pre>
  
  <p>It looks like the style ui-front overrides the autucomplete z-index. In my browser I have the following result:</p>
  
  <p><a href="https://i.stack.imgur.com/R276U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R276U.png" alt="enter image description here"></a></p>
  
  <p>I try to add !important to the z-index in ui-autocomplete but it looks like !important can't be applied to the class(only for id). I can't add id since there are many places using this drop down menu. Is there a way to make drop down menu shows on front of the modal? </p>
  
  <p>Thanks</p>