Question

使用z-index时遇到了一些问题。当我向一个id添加z-index以使它不与我拥有的另一个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>

Answer 1

以下是您想要的猜测演示：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上进行了测试，所有这些都有预期的结果。

另一件值得注意的事情是，如果事件区域被z-index较大的元素覆盖，那么z-index较小的元素将不会接收事件（例如：鼠标单击），如之前的演示所示。< / p>

您可以在http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/了解更多详情，了解z-index。

z-index在点击时突出显示图像

1 个答案: