Problème avec z-index

Question

Il me manque quelque chose à propos de z-index. Regardez ce code:

var span = document.createElement('span'); 
span.innerHTML = '<div style="background: none repeat scroll 0px 0px' + 
    '#000000; opacity: 0.7; display: block; top: 0px; bottom: 0px; ' + 
    'left: 0px; right: 0px; position: fixed; z-index: 1;"></div>'; 

span.innerHTML += '<div id="fancybox-wrap" style="opacity: 1; ' + 
    'width: 420px; height: 200px; top: 467px; left: 481.5px; ' + 
    'display: block; z-index: 2; ' + 
    'border: 1px solid black;">Inside div</div>'; 
document.body.appendChild(span); 

Basé sur le fait que le second div a un z-index plus élevé, devrait-il être au-dessus de la première div?

Jetez un oeil à http://jsfiddle.net/qwertymk/TQSkX/ pour voir ce que je veux dire

Answer 1

z-index ne s'applique pas aux éléments qui sont position: static (ce qui est la valeur par défaut)

Answer 2

Vous devez définir la position sur la seconde div dans le css pour qu'il lise l'index z.

ajoutez position: relative; à votre deuxième div et cela devrait fonctionner correctement.

var span = document.createElement('span'); 
    span.innerHTML = '<div style="background: none repeat scroll 0px 0px' + 
     '#000000; opacity: 0.7; display: block; top: 0px; bottom: 0px; ' + 
     'left: 0px; right: 0px; position: fixed; z-index: 1;"></div>'; 

    span.innerHTML += '<div id="fancybox-wrap" style="opacity: 1; ' + 
     'width: 420px; height: 200px; top: 467px; left: 481.5px; ' + 
     'display: block; position: relative; z-index: 2; ' + 
     'border: 1px solid black;">Inside div</div>'; 
    document.body.appendChild(span);