Sandwich div entre deux autres divs dans un conteneur séparé dans IE6

Je travaille sur un design délicat avec plusieurs couches, et cela nécessite de superposer un div entre deux autres divs qui se chevauchent dans un conteneur séparé. Voici mon exemple simplifié qui fonctionne dans Firefox, mais pas IE6 (ce qui est bien sûr de choix du navigateur du client): http://dawnup.com/sandwich Sandwich div entre deux autres divs dans un conteneur séparé dans IE6

Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<style type="text/css"> 
    div { 
     width:200px; 
     height:200px; 
     position:absolute; 
    } 

    #middle { 
     background-color:#aaa; 
     left:30px; 
     top:30px; 
     z-index:1; 
    } 
    #bottom { 
     height:200px; 
     background-color:#777; 
     left:0px; 
    } 
    #top { 
     background-color:#ccc; 
     left:40px; 
     top:40px; 
     z-index:2; 
    } 
</style> 

</head> 
<body> 
    <div id="middle">MIDDLE</div> 
    <div id="container"> 
     <div id="bottom">BOTTOM 
      <div id="top">TOP</div> 
     </div> 
    </div> 
</body> 
</html>

est-il une astuce pour obtenir ceci pour travailler dans IE6? Ou ce genre de chevauchement est-il impossible?

Merci à l'avance

Source

2010-07-08 James

Pourquoi ne peut pas vous déplacer simplement l'élément #top il est donc pas dans bas?

Source

2010-07-08 07:18:33

Tous les divs ont une position: absolute. J'ai essayé aussi, mais j'ai eu le même résultat. – James

ne pouvez-vous pas simplement déplacer le haut à l'extérieur du fond? –

vous pouvez également essayer de spécifier un 'z-index' explicite inférieur à #top pour #bottom. –

Sandwich div entre deux autres divs dans un conteneur séparé dans IE6

Répondre

Questions connexes