Strange comportement de l'index z dans CSS

Question

J'essaie d'utiliser z-index sur certains éléments d'une page. Fondamentalement, j'ai un formulaire de contact avec un serveur et une boîte de réponse. Le formulaire de contact est utilisé sur la page dans un endroit différent et fonctionne très bien ...

bouton Envoyer est enfoncée, overlay-1 couvre la forme, la réponse ajax déclenche un remerciement boîte qui couvre overlay-1

Maintenant, tout cela fonctionne très bien pour le formulaire qui est positionné relativement sur la page. Cependant, j'ai exactement la même forme qui apparaît au-dessus de tout, mais mes index z ne sont pas respectés même si le formulaire utilise les mêmes classes.

Quelqu'un peut-il me donner des pointeurs?

Alex

HTML:

<div id="popuporderform" class="orderform"> 
    <!-- .resultBox injected here --> 
    <form method="post"> 
     <input name="name" type="text" /> 
     <input class="send" type="submit" value="Send" /> 
    </form> 

</div> 
<!-- .orderspinner injected here --> 

CSS:

/* -- ORDER FORM -- */ 
div.orderform { 
    width: 220px; 
    background-color: #fff; 
    height: 300px; 
} 

// This ID is for the pop up version of the form and is not used in the 
// form that is within the layout of the page 
#popuporderform {   
    position: absolute; 
    top: 100px; 
    left: 100px; 
    z-index: 200; 
} 

// this is the overlay with spinner in it -- this DOES overlay the form 
.orderspinner { 
    position: absolute; 
    opacity: 0.9; 
    filter: alpha(opacity=90); 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); 
    z-index: 250; 
    background: #fff; 
} 

// This is the thank-you box - it should appear over the .orderspinner (but isn't) 
.resultBox { 
    display: block; 
    width: 150px; 
    height: 100px; 
    background-color: #fff; 
    position: absolute; 
    z-index: 300; 
    border: 1px red solid; 
    color: #000; 
} 

FIXES:

Je réinjecté la superposition dans la div plutôt que de l'extérieur mettant donc dans le même Contexte z-index.

HTML:

<div id="popuporderform" class="orderform"> 
    <!-- .orderspinner injected here --> 
    <!-- .resultBox injected here --> 
    <form method="post"> 
     <input name="name" type="text" /> 
     <input class="send" type="submit" value="Send" /> 
    </form> 

</div> 

Answer 1

J'ai eu des problèmes avec cela il y a un certain temps. Mon problème s'est avéré être connecté au contexte d'empilement, fondamentalement quand vous avez un élément avec un index z, il commence un nouveau contexte d'empilement dedans, signifiant que l'index z des éléments dedans ne sera pas comparé avec l'index z des éléments à l'extérieur. Ce qui ajoute à la complexité des choses, c'est que IE 6-7 (je ne sais pas environ 8) commence un nouveau contexte d'empilement lorsque les éléments sont positionnés (absolus, relatifs). donc je voudrais vérifier les éléments de votre popup jusqu'à la racine et essayer de leur donner un indice z élevé et voir si cela résout. avec un peu d'essai et d'erreur, vous pouvez probablement trouver le problème.

Answer 2

Est-ce que le code qui est censé être dans l'utilisation d'arrière-plan z-index? Avez-vous essayé de changer l'index z à des valeurs ridiculement grandes pour voir si elle est en concurrence avec un autre composant?

Difficile de penser à autre chose aveuglément.