2017-10-13 5 views
0

J'essaie de définir l'index z d'un composant select2 spécifique sur mon écran car il doit être plus haut que le Top_Menu, puis le reste de z de select2 -index Je veux être 0. donc je l'ai écritComment puis-je définir l'index z d'un select2 spécifique?

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

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

et quand je regarde chromes élément inspectent, le z-index a été appliqué comme prévu, mais lorsque vous utilisez le widget, il a encore un z -index de 0 car il se place toujours sous le .Top_Menu (l'index z de Top_Menu est actuellement défini sur 2)

+1

_ "Si vous avez besoin de plus d'informations de moi alors s'il vous plaît faites le moi savoir." _ - nous l'avons déjà fait: [demander] – CBroe

+0

Le premier sélecteur est-il correct? valeur d'osition autre que (la valeur par défaut) 'position: static'? Vous ne pouvez pas avoir d'index z sur un élément sans position relative, fixe, absolue, etc. – Jayx

+0

Salut, oui l'élément a une position: relative. Ce que je devrais probablement ajouter, c'est que le style pour select2 est ailleurs et je le contourne. – Joeliomason

Répondre

0

select2-container{z-index: 0;} n'est jamais utilisé (même s'il est chargé plus tard) car select2-container a la plus faible spécificité que .Top_Menu.OSInline > .select2-container.

Par exemple,

/*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>

Augmenter la spécificité pour votre deuxième .select2-conteneur (soit avec une nouvelle classe ou plus explicitement reconnu les parents, et vous devriez être en mesure de moins prêter à confusion élaborer une solution