z-index在點擊時突出顯示圖像

我在使用z-index時遇到了一些問題。當我將z-index添加到一個id中，以便它與另一個div沒有重疊時，它會使點擊時的圖像突出顯示，就像雙擊一樣。z-index在點擊時突出顯示圖像

這隻發生在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>

來源

2012-12-19 Michael N

你能給我們一些HTML嗎？ –

'z-index：-1'無效。顯示你的HTML。如果可能的話，一個[jsFiddle]（http://jsfiddle.net）。 –

我已經添加了HTML。那裏沒有太多。 –

這裏有你想要的東西猜測演示：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; 
}

當然，不同的結果是由web broswers的版本引起的。我已經在Firefox 13.0.1，Chrome 23.0，Opera 12.0和IE 9.0上進行了測試，所有這些都有預期的結果。

您應該注意的另一件事是，如果事件區域被z-index較大的元素所覆蓋，z-index較小的元素將不會收到事件（例如：鼠標點擊），如演示之前所示。

你也可以看看z-index在http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/的更多細節。

來源

2012-12-19 07:31:59 Ovilia

z-index在點擊時突出顯示圖像

回答

相關問題