positionnement vertical (empilement) d'éléments incorrects dans IE

Question

Je cette simple:

<script type="text/javascript"> 
$("#message").fadeIn("slow"); 
</script> 

<div id='message' style="display: none;"> 
    <span>Hey, du har fået +1 points, du har nu <u>2929</u></span> 
    <a href="#" class="close-notify" onclick="closeNotice()">X</a> 
</div> 

Et j'ai un dessin sur mon site. Quand j'utilise ceci, cela fonctionne et montre "sur" la conception, mais quand j'essaie de voir dans IE, il montre "sous" le design ..

Est-ce que cela importe où la boîte <div> est? pourquoi est-il si cela montre correct dans FF mais pas IE?

Answer 1

Sans les règles CSS appliquées à #message, il est difficile de répondre correctement à la question. Cela dit, je suppose que vous voulez créer une boîte de notification qui ressemble à celles de Stack Overflow.

Pour qu'un élément soit positionné au-dessus d'un autre, vous devez affecter un z-index à l'élément. z-index est une propriété uniquement évaluée sur les éléments positionnés donc vous devez également positionner votre <div>. Le CSS suivant devrait positionner votre <div> au-dessus de tout le contenu.

#message { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 50; /* Anything higher than 1 will do */ 

    height: 26px; 
    width: 100%; 
}