I must be missing something about z-index. Look at this 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);

Based on the fact that the second div has a higher z-index, should it be on top of the first div?

Take a look at / to see what I mean

I must be missing something about z-index. Look at this 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);

Based on the fact that the second div has a higher z-index, should it be on top of the first div?

Take a look at http://jsfiddle/qwertymk/TQSkX/ to see what I mean

• javascript
• css
• z-index
• inline-styles

• You can't put a div inside a span. – Quentin Commented Dec 23, 2010 at 18:45
• Changing it to a div, didn't change anything. jsfiddle/qwertymk/TQSkX/2 – qwertymk Commented Dec 23, 2010 at 18:47

2 Answers 2

z-index does not apply to elements that are position: static (which is the default)

You need to set the position on the second div in the css for it to read the z-index.

add position: relative; to your second div and it should work fine.

   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);