Chrome中的z-index問題

Question

我在Chrome中設置z-index時出現問題，這裏是我的示例http://dev.fama.net.pl/tides/index.html，點擊右側三角形，新圖片應該位於字母上方，並且在除Chrome之外的所有瀏覽器中，所有元素定位絕對如此它應該工作，但它不，有人知道爲什麼？

CSS

#central { 
    color: #76b2d1; 
    font-size: 22px; 
    top: 50%; 
    margin-top: -15px; 
    left: 50%; 
    margin-left: -215px; 
    position: absolute; 
    text-transform: uppercase; 
    z-index: 0; 
    font-family: 'gothic'; 
} 
#container01 { 
    position: absolute; 
    top: 180px; 
    left: 0; 
    z-index: 1; 
} 
#container02 { 
    position: absolute; 
    top: 55px; 
    right: 0; 
    z-index: 1; 
} 
#container03 { 
    position: absolute; 
    bottom: 25px; 
    right: 0; 
    z-index: 1; 
} 
#container01 > div, #container02 > div , #container03 > div { 
    position: absolute; 
    white-space: nowrap; 
    font-family: 'gothic'; 
    text-transform: uppercase; 
} 
#p1text01 { 
    font-size: 41px; 
    color: #f7ebd3; 
    top: 0px; 
    left: 50px; 
} 
#p1text02 { 
    font-size: 26px; 
    color: #f7ebd3; 
    top: 55px; 
    left: 245px; 
} 
#p1text03 { 
    font-size: 75px; 
    color: #f7ebd3; 
    top: 55px; 
    right: 80px; 
} 
#p1text04 { 
    font-size: 28px; 
    color: #f7ebd3; 
    top: 145px; 
    right: 365px; 
} 
#p1text05 { 
    font-size: 160px; 
    color: #f7ebd3; 
    bottom: 40px; 
    right: 100px; 
} 
#p1text06 { 
    font-size: 36px; 
    color: #f7ebd3; 
    bottom: 35px; 
    right: 200px; 
} 


#bg { 
    position:fixed; 
    top:-50%; 
    left:-50%; 
    width:200%; 
    height:200%; 
} 
#bg img { 
    position:absolute; 
    top:10px; 
    left:10px; 
    right:10px; 
    bottom:10px; 
    margin: auto; 
    min-width:50%; 
    min-height:50%; 
} 
#bg img.blank { 
    z-index: 0; 
    display: none; 
} 
#bg img.pic { 
    z-index: 2 !important; 
    left: 20%; 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
} 
.arrow { 
    position: absolute; 
    top: 50%; 
    margin-top: -120px; 
    width: 0; 
    height: 0; 
    opacity:.2; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
    cursor: pointer; 
    border-top: 120px solid transparent; 
    border-bottom: 120px solid transparent;   
} 
.arrow:hover { 
    opacity:.5 !important; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; 
} 
#arrow-left { 
    border-left: 120px solid #83bedd; 
    left: -125px; 
    z-index: 3; 
} 
#arrow-right { 
    border-right: 120px solid #83bedd; 
    right: -15px; 
    z-index: 3; 
} 

HTML

<div id="bg"> 
     <img class="blank" src="img/bg.jpg" alt="" data-xrange="20" data-yrange="20" /> 
     <img class="blank" src="img/bg.png" alt="" data-xrange="10" data-yrange="10"/> 
     <img class="pic" src="img/bga.jpg" alt="" /> 
    </div> 
    <div id="central">some text</div> 
    <div id="container01"> 
     <div id="p1text01" data-xrange="30" data-yrange="10">some text</div> 
     <div id="p1text02" data-xrange="10" data-yrange="10">some text</div> 
    </div> 
    <div id="container02"> 
     <div id="p1text03" data-xrange="40" data-yrange="10" data-invert="true">some text</div> 
     <div id="p1text04" data-xrange="20" data-yrange="10" data-invert="true">some text</div> 
    </div> 
    <div id="container03"> 
     <div id="p1text05" data-xrange="50" data-yrange="10">some text</div> 
     <div id="p1text06" data-xrange="25" data-yrange="10">some text</div> 
    </div> 

    <div id="arrow-left" class="arrow"></div> 
    <div id="arrow-right" class="arrow"></div> 

Answer 1

切換#bg div的position從fixed到relative解決了這個問題，但我不能確定如果這會產生連鎖效應.. 。

Answer 2

嘗試增加：

#bg { 
    z-index: 2; 
} 

Answer 3

#bg {z-index: 2;}似乎工作。不太清楚如何發生這個錯誤雖然

Answer 4

position:absolute總是在其他類型的職位之上。我改變了這個#bg在鉻的開發工具和圖像上方的文字。