CSS div overlay et jQuery

Question

C'est plus ou moins une question CSS mais je l'utilise avec jQuery. OK, donc en gros ce que j'ai est le suivant:

<div 
    style="overflow: hidden; width: 1000px; height: 450px; background-color: rgb(0, 0, 0); position: relative;" 
    id="wrapper"> 
    <div 
     style="background-color: rgb(255, 255, 255); opacity: 0.9; top: 0pt; left: 0pt; width: 1000px; height: 450px; position: absolute; z-index: 500;" 
     id="mask"></div> 
    <div 
     class="ui-draggable" 
     style="margin: 60px auto auto; position: relative; width: 1550px; height: 340px;" 
     id="test"> 
     <div style="float: left; margin-left: 10px; width: 100px; position: relative;" class="row"> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Chrysanthemum.jpg"></div> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Desert.jpg"></div> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Hydrangeas.jpg"></div> 
     </div> 
     <div style="float: left; margin-left: 10px; width: 100px; position: relative;" class="row"> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Jellyfish.jpg"></div> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Koala.jpg"></div> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Lighthouse.jpg"></div> 
     </div> 
    </div> 
</div> 
<div 
    style="position: absolute; left: 978px; top: 223px; color: rgb(255, 255, 255);" 
    id="next-btn">Next</div> 
<div 
    style="position: absolute; left: 8px; top: 223px; color: rgb(255, 255, 255);" 
    id="prev-btn">Prev</div> 

Ce que je fais avec le div masque tente de l'obtenir pour recouvrir l'emballage entier. J'ai donc défini sa largeur et sa hauteur à la hauteur de l'emballage. Cela fonctionne bien dans Firefox, Chrome et Safari.

Toutefois, dans Internet Explorer, cela ne fonctionne pas. Comment puis-je faire cette superposition?

J'ai essayé de régler la position à absolue qui a bien fonctionné sauf une chose. Il y a quelque chose qui se passe sur ce masque. Sa position est relative. J'ai placé l'un sur le dessus à un z-index de 1000 et le masque à 500. Cependant il semble qu'il y ait un bogue dans Internet Explorer qui fait automatiquement un div absolu au-dessus de tout.

Answer 1

Cependant, il semble qu'il y ait un bogue, c'est-à-dire que le div absolu soit au-dessus de tout.

Non. Le problème est que Internet Explorer doesn't support the CSS3 opacity tag. Vous devrez ajouter le style suivant à votre DIV de masque pour le faire fonctionner dans IE aussi:

filter: alpha(opacity=90); 

lire également here et here pour plus de conseils sur la façon de mettre en œuvre correctement l'opacité.

Sur une note, vous devez utiliser les styles en ligne moins souvent. Cela rend votre code désordonné et difficile à déboguer.

Answer 2

Quelle version d'IE? en tout cas vous pouvez superposer votre objet absolu avec un autre objet absolu, puis mettre le contenu relatif à l'intérieur de celui-ci.