如何设置特定select2的z-index

Question

我试图在我的屏幕上设置特定select2组件的z-index，因为它需要高于Top_Menu，然后select2的z-index的其余部分我想要为0。 所以我写了这个

.Top_Menu.OSInline > .select2-container { 
    z-index: 50 !important;
}

.select2-container { 
    z-index: 0;
}

当我查看chromes inspect元素时，z-index已按预期应用，但是当使用小部件时，它仍然具有0的z-index，因为它仍然位于.Top_Menu（Top_Menu＆＃39; s）之下z-index目前设置为2）

Answer 1

从不使用

select2-container{z-index: 0;}（即使稍后加载），因为select2-container的特异性低于.Top_Menu.OSInline > .select2-container。

例如，

/*Loaded first, Most Specific*/
div.MoreThan > div.ALittleSpecific {
  color: blue;
}

/*Loaded second, Kindof Specific*/
div.ALittleSpecific {
  color: red;
}

/*Loaded last, Least Specific*/
div {
  color: green;
}

<div class="MoreThan">
<div class="ALittleSpecific">
  Specificity Trumps Load Order
</div>
</div>

增加第二个.select2容器的特异性（使用新类或更明确认可的父级，您应该能够更容易混淆地制定解决方案。