追加する方法！クラスに重要

Question

ドロップダウンメニューがモーダルの背後に隠れています（私はブートストラップモーダルを使用しています）。問題を解決するためにいくつかの方法を試しましたが、どれも機能しません。ここでは、コードは次のようになります。

<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;"> 
<li>....</li> 
</ul> 

私のオートコンプリートCSSは次のとおりです。

.ui-autocomplete { 
border:1px solid #b2b8bd; 
font-size: .750em; 
max-height: 300px; 
overflow-y: auto; 
z-index:9999; 
} 

は、しかし、私の他のSCSSファイルで、私は$zindex-modal-background: 1040 !default;を定義し、UI-フロントの定義は

.ui-front { 
z-index: $zindex-modal-background;} 

ことですui-frontスタイルはautucomplete z-indexよりも優先されます。 ！UI-オートコンプリートのzインデックスに重要

は、私が追加しようとするが、それはのように見える重要なのは、クラス（のみのために適用することはできません。私のブラウザでは、私は次の結果を持っています！ id）。このドロップダウンメニューを使用する場所が多いため、IDを追加できません。モーダルの前にメニューを表示する方法はありますか？確かにあなたはそれのために達する場合

おかげ

Answer 1

!importantは、あなたがのために達する非常に最後のものになるはずです。あなたのルールが他のルールを上書きするようにするに

、

• はあなたのルールは、より具体的なことを確認します。引用した2つのルールは同じ特異性を持っています。単なるクラスの場合は、ルールにタグを追加するか、2番目のクラスや構造情報などを追加します。特異度の計算の詳細はin the specです。

• 2つのルールは同じ特異性を持っているため、の後にの後にCSSの適用された順序でルールが勝つようにすることができます。