Question

i have a problem with setting z-index in Chrome, here my example http://dev.fama.net.pl/tides/index.html, click in the right triangle, new image should be above the letters and it is in all browsers except Chrome, all elements are positioned absolutely so it should works but it doesn’t, anybody knows why ??

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

Switching the position of the #bg div from fixed to relative solves the issue, though I’m unsure if that will have a knock-on effect…