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

divのをからpositionに切り替えると問題が解決しますが、それがノックオン効果をもたらすかどうかはわかりません...#bgfixedrelative

于 2012-10-12T11:01:56.547 に答える
1

position:absolute常に他のタイプのポジションの上に行きます。Chromeの開発ツール#bgでこれを変更したところ、画像がテキストの上に表示されます。

于 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 に答える