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

将position div的#bg从fixed切换为relative解决了这个问题，但我不确定这是否会产生连锁效应。

Answer 2

position:absolute始终排在其他类型的位置之上。我在 Chrome的开发工具中为#bg更改了此内容，图片位于文本上方。

Answer 3

尝试添加：

#bg {
     z-index: 2;
}

Answer 4

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

Chrome中的z-index问题

4 个答案: