1

z-index の使用中に少し問題が発生しました。z-index を id に追加して、別の div と重ならないようにすると、ダブルクリックのように、クリック時に画像が強調表示されます。

これは Firefox でのみ発生します。Chrome と IE 9、8、および 7 では、クリックしても強調表示されません。Firefox 17.0.1 を使用しています。何が原因でしょうか? 私の ids CSS は次のようになります。

#brand-content, #brand-content>img
{
width:100%;
height:100%;
position: relative;
top:0px;
z-index:-1;
}

ページにある HTML は次のとおりです。

    <head>
       <link rel="stylesheet" type="text/css" href="../stylesheet.css">
    </head>
    <body>
     <?php
      include ("../includes/sidebar.php");
     ?>
     <div id="brand-content">
      <img src="../images/IMG_78707.jpg">
     </div>
    </body>
4

1 に答える 1

0

ここにあなたが望むものの推測デモがあります: http://jsfiddle.net/YVw58/2/

HTML 部分:

<div id="parent">
    This is parent.
    <div id="compare">compare</div>
    <div id="childBelow">below</div>
    <div id="childUp">up</div>
</div>

CSS 部分:

#parent {
    background-color: #f66;
}

#childBelow {
    background-color: #6f6;
    height: 80px;
    width: 160px;
    position: absolute;
    left: 0px;
    top: 100px;
    z-index: -1;
}#parent {
    background-color: #f66;
}

#childBelow {
    background-color: #6f6;
    height: 80px;
    width: 160px;
    position: absolute;
    left: 0px;
    top: 100px;
    z-index: -1;
}

#childUp {
    background-color: #66f;  
    height: 80px;      
    width: 160px; 
    position: absolute;
    left: 0px;
    top: 20px;   
}

#compare {
    position: absolute;
    left: 50px;
    top: 50px;
    background-color: #ccc;
    width: 160px;
    height: 80px;
}


#childUp {
    background-color: #66f;  
    height: 80px;      
    width: 160px; 
    position: absolute;
    left: 0px;
    top: 20px;   
}

#compare {
    position: absolute;
    left: 50px;
    top: 50px;
    background-color: #ccc;
    width: 160px;
    height: 80px;
}

もちろん、ブラウザのバージョンによって結果は異なります。Firefox 13.0.1、Chrome 23.0、Opera 12.0、および IE 9.0 でテストしましたが、すべて期待どおりの結果が得られました。

注意すべきもう 1 つの点は、前のデモで示したように、イベント エリアが大きな z-index を持つ要素で覆われている場合、小さな z-index を持つ要素はイベント (例: マウス クリック) を受信しないことです。

詳細については、 http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/で z-index を参照することもできます。

于 2012-12-19T07:31:59.240 に答える