Positionnement divs avec z-index dans Internet Explorer 7

Question

<div style="position:relative;"> OUTERFOO <div style="position:absolute; z-index:1000;">FOO</div></div> <div style="position:relative;">OUTERBAR <div style="position:absolute;">BAR</div> </div>

Je veux FOO à empiler sur BAR sans OUTERFOO empiler sur OUTERBAR!

Cela fonctionne dans Firefox, mais pas dans IE7. Quelqu'un peut poster une solution de contournement?

Merci à l'avance, Stephan

Answer 1

Le fait que W3C définit un standard sans création d'implémentation est ce qui conduit à des interprétations différentes, quel que soit le navigateur qui a raison ou non.

La bonne façon de faire ce que vous voulez dans tous les navigateurs est quelque chose comme:

<div style="position:relative; z-index:1;"> OUTERFOO 
    <div style="position:relative; z-index:1;">OUTERBAR 
    <div style="position:absolute; z-index:1;">BAR</div> 
    </div> 
    <div style="position:absolute; z-index:2;">FOO</div> 
</div> 

ou

<div style="position:relative; z-index:1;"> OUTERFOO 
    <div style="position:relative; z-index:1;">OUTERBAR 
    <div style="position:absolute; z-index:1;">BAR</div> 
    <div style="position:absolute; z-index:2;">FOO</div> 
    </div> 
</div> 

Pas besoin de ziindexes avec des chiffres ridicules - qui mène à la confusion. Fondamentalement, lorsque vous utilisez z-index, vous devez positionner tous les éléments frères et l'élément parent, et vous devriez z-indexer tous les frères et sœurs par souci de clarté. Cela fait beaucoup plus de maux de tête.

La façon dont vous essayez de le faire dans votre question viole les règles de base de la superposition de la même manière que cela est le cas, par exemple:

<div><span></div></span> 

Vous êtes à la recherche d'une solution qui utilise css pour briser les règles d'imbrication de la syntaxe html. Les exemples que je fournis accomplissent ce que vous voulez vraiment en obéissant à ces règles.

Answer 2

Il y a un bug z-index connu dans la version de IE avant 8 où les éléments positionnés génèrent un nouveau contexte d'empilement provoquant z-index pour fonctionner correctement. This example illustre le problème.

Votre page s'affiche-t-elle correctement dans IE8?

Answer 3

Je ne sais pas si je suis tout à fait clair sur ce que vous voulez toutefois prendre votre code et comment il rend dans Firefox 3 peut être reproduit dans IE7 en réorganisant vos divs comme suit

<div style="position:relative; z-index:2;">OUTERFOO</div> 
<div style="position:absolute; z-index:1"> 
    <div style="position:absolute; z-index:1000;">FOO</div> 
     OUTERBAR 
     <div style="position: relative; z-index: 1;">BAR</div> 
    </div> 
</div>