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 上测试过，都达到了预期的效果。

另一个需要注意的是，如果事件区域被较大 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 回答