1

我在 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>
4

4 回答 4

3

position将#bgdiv 从切换fixed为relative解决问题，但我不确定这是否会产生连锁反应......

于 2012-10-12T11:01:56.547 回答
1

position:absolute总是在其他类型的位置之上。#bg我在Chrome 的开发工具中对此进行了更改，图像位于文本上方。

于 2012-10-12T11:05:31.177 回答
0

尝试添加：

#bg {
     z-index: 2;
}
于 2012-10-12T11:01:53.300 回答
0

#bg {z-index: 2;}似乎工作。虽然不太确定这个错误是如何发生的

于 2012-10-12T11:03:41.127 回答