javascript - z-index の問題

Question

z-index について何かが欠けているに違いありません。このコードを見てください：

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

2 番目の div の z-index が高いという事実に基づいて、最初の div の上に配置する必要がありますか?

http://jsfiddle.net/qwertymk/TQSkX/を見て、私の意味を確認してください

Answer 1

z-indexposition: static(デフォルト) である要素には適用されません。

Answer 2

z-index を読み取るには、css の 2 番目の div に位置を設定する必要があります。

2 番目の divに追加position: relative;すると、正常に動作するはずです。

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