Index Z dans Internet Explorer

Question

J'essaie d'obtenir le z-index pour fonctionner dans mon code HTML. J'ai regardé cela à plusieurs endroits, et il dit que je dois ajouter une position à mon div. Je l'ai déjà fait et ça ne marche toujours pas. Voici le CSS et le HTML que j'ai utilisé pour le z-index.

CSS:

.Location{ 
    width: 1000px; 
    margin-top: 50px; 
    margin-left: auto; 
    margin-bottom: 0px; 
    margin-right: auto; 
} 

.logo{ 
    background-color: white; 
    position: relative; 
    left: 40px; 
    float: left; 
    width: 225px; 
    z-index: 10; 
    padding-left: 15px; 
    padding-bottom: 20px; 
    padding-top: 20px; 
} 

Answer 1

Qu'est-ce que vous avez est correct d'appliquer z-index: une position type relatif, fixe ou absolu. Le problème avec IE est qu'il n'applique pas l'index z d'un élément globalement à travers le document entier comme il le fait dans d'autres navigateurs.

Dans IE, z-index est uniquement appliqué dans un contexte d'empilement, créé automatiquement par tout élément dont la position est relative, fixe ou absolue.

En conséquence, vous avez très probablement obtenu ce qui suit, ce qui est la raison pour laquelle z-index ne fonctionne pas comme vous attendez:

<div style="position: relative"> 
    <div style="position: relative; z-index: 1;"> 
    </div> 
</div> 
<div style="position: relative"> 
    <div style="position: relative; z-index: 2;"> 
    </div> 
</div> 

Dans ce qui précède, tous les navigateurs IE mais mettra toujours le z-index: 2 div au-dessus de l'index z: 1. Cependant, IE ne sera pas toujours parce que les deux éléments sont dans leur propre contexte d'empilement et donc leurs z-index ne s'appliquent pas les uns aux autres.

Le correctif est d'ajouter z-index des éléments parents qui créent le contexte d'empilement séparé:

<div style="position: relative; z-index: 1;"> 
    <div style="position: relative;"> 
    </div> 
</div> 
<div style="position: relative; z-index: 2;"> 
    <div style="position: relative;"> 
    </div> 
</div> 

Answer 2

Eh bien vous n'avez pas posté de HTML il est un peu difficile pour vous aider. Mais ces articles devraient vous aider à comprendre comment utiliser correctement z-index:

• Find out how elements stack and start using low z-index values

• How z-index works demo