Z索引問題

我必須錯過一些關於Z索引的內容。看看這段代碼：Z索引問題

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/明白我的意思

來源

2010-12-23 qwertymk

您不能在一個範圍內放置一個div。 – Quentin 2010-12-23 18:45:22

更改爲div，並沒有改變任何東西。 http://jsfiddle.net/qwertymk/TQSkX/2/ – qwertymk 2010-12-23 18:47:59

z-index並不適用於那些position: static（這是默認值）

來源

2010-12-23 18:46:06 Quentin

你需要設置在CSS的第二個div的位置元素因爲它讀取z-索引。

將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-23 18:48:37 TH1981

回答

相關問題