1

我一定遗漏了一些关于 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);

基于第二个 div 具有更高 z-index 的事实，它应该在第一个 div 之上吗？

看看http://jsfiddle.net/qwertymk/TQSkX/看看我的意思

4

2 回答 2

7

z-index不适用于以下元素position: static（这是默认设置）

于 2010-12-23T18:46:06.770 回答
2

您需要在 css 中的第二个 div 上设置位置，以便它读取 z-index。

添加position: relative;到您的第二个 div，它应该可以正常工作。

   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);
于 2010-12-23T18:48:37.950 回答