z-index不按預期工作（Chrome和Opera）

我有一個「不透明」類的div和另一個類爲「product-info」的div，它們都處於同一級別。z-index不按預期工作（Chrome和Opera）

的代碼如下：

<div class="opaque"></div> 
<div class="product-info"> 
    <img class="product-image" src="/Images/D3.jpg" /> 
    fsdfdsfsdfs 
</div>

.opaque 
{ 
    background-color: White; 
-moz-opacity:.60; filter:alpha(opacity=60); opacity:.60; 
position: absolute; 
width: 100%; 
height: 100%; 
left: 0; 
top: 0; 
z-index: 1; 
} 

.product-info 
{ 
padding: 5px; 
text-align: center; 
z-index: 2; 
}

注意，產品信息被設置爲z索引2和不透明具有z索引1。因此產品信息應當顯示在不透明所以不應該褪色。然而，產品信息（和文本）中的圖像淡化。這發生在Chrome和Opera中，因此我期望這是因爲它們不是IE而應該發生的事情！

上面顯示的HTML代碼有很多位，每個都嵌套在lis中，它們設置爲左寬度爲33％。當頁面完全加載（$(window).load()）時，我使用jQuery來檢測所有產品的最大高度，並將其應用於所有其他的高度。我曾嘗試刪除所有jQuery以防止影響z-index，但我只能以不整潔的外觀和感覺得到相同的結果。

我曾嘗試使用Google Chromes檢查元素工具和問題中的元素顯示正確的特徵。

任何人都可以看到我在做什麼錯在這裏？我一直試圖解決這個問題幾天，現在想知道發生了什麼。

謝謝。

問候，

理查德

的完整代碼的要求：

我想這是所有必需的。我將在幾分鐘內用此代碼創建一個頁面，以查看它是否會再現問題。

<div id="BodyTag_ContentPanel"> 
    <div class="overlay-background"></div> 
    <div class="scroll-pane"> 
     <div> 
      <ul class="product-list"> 
       <li class="product"> 
        <div class="spacer"> 
         <div class="opaque"></div> 
         <div class="product-info"> 
          <img class="product-image" src="/Images/D3.jpg" /> 
          <div class="enlarge"> 
           <div class="image-enlargement"> 
            <span class="close"><img src="/Images/close.jpg" /></span> 
            <div class="enlargement"> 
             <div class="image-container"><img src="/Images/D3.jpg" /></div> 
             <div class="product-code"><span class="text-container">D3</span></div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="product-code">D3</div> 
         <div class="clear"></div> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body>

.product-list 
{ 
    list-style: none; 
    padding: 0; 
    width: 100%; 
} 

.product 
{ 
    width: 33%; 
    height: 25%; 
    float: left; 
    position: relative; 
} 

.product .spacer 
{ 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    margin: 10px; 
    padding: 5px; 
    border: 4px solid #C47F50; 
    position: relative; 
} 

.product .opaque 
{ 
    background-color: White; 
    -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0; 
    z-index: 1; 
} 

.product .product-info 
{ 
    padding: 5px; 
    text-align: center; 
    z-index: 2; 
} 

.product .product-info .product-image 
{ 
    max-width: 200px; 
    max-height: 200px; 
    min-width: 150px; 
    min-height: 150px; 
    z-index: 2; 
} 

.product .product-code 
{ 
    position: absolute; 
    bottom: -15px; 
    width: 50%; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: White; 
    text-align: center; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 4px solid #C47F50; 
    line-height: 20px; 
    z-index: 2; 
} 

.product .image-enlargement 
{ 
    position: fixed; 
    display: none; 
    padding: 5px; 
    background-color: White; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 4px solid #C47F50; 
    z-index: 103; 
} 

.product .enlarge 
{ 
    float: right; 
}

來源

2010-12-22 ClarkeyBoy

我找到了解決方案！我只是將position: relative;加到.product-info。我不敢相信我是如此愚蠢，以至於一開始就沒有嘗試過！感謝您的努力@Thomas & Lazycommit。 @Lazycommit你的鏈接派上用場 - 它確認我的代碼應該一直工作，如果它不是因爲錯過了position: relative;。我注意到他們已經爲示例中的所有div設置了position屬性 - 這就是讓我嘗試它的原因。

來源

2010-12-22 06:55:41 ClarkeyBoy

嘗試設置，應該是在後面爲負數，如-1項目:)

來源

2010-12-22 06:14:02

那種作品 - 它使圖像顯示爲預期，但內容div的背景出現在完全不透明的，而我希望它消失，如果它是一個產品中，如果你明白我的意思。基本上每個產品都有一個邊框，並且我希望只有在邊框內的背景纔會淡化，而不是`.product-info` div中的圖像或文字。 – ClarkeyBoy 2010-12-22 06:17:02

我認爲你的HTML可能有問題，那麼根據http://www.w3.org/TR/css3-color/#transparency你不能改變透明對象之外的其他元素的層次的。你的HTML是什麼樣的？ – 2010-12-22 06:21:01

我將編輯我的文章，以便完整的產品清單以及相關的CSS。給我幾分鐘... – ClarkeyBoy 2010-12-22 06:29:11

這是一個很大的主題的z-index。你可以看看Firefox開發者頁面this，以便更好地理解瀏覽器堆疊。

來源

2010-12-22 06:32:39 lazycommit

我知道這是舊的，但你可以使用rgba（）而不是不透明，並擺脫「產品信息」股利。這與你想要的效果相同，因爲rgba（）使用不同的方法來產生透明效果，而不會使子元素透明。做你想要的效果要容易得多。

來源

2014-03-27 17:04:49

如果有外部div設置position: fixed;並且您需要position: fixed;那裏添加z-index與內部div相同。 ex：

.notifications { 
    position: fixed; 
    width: auto; 
    max-width: 70%; 
    z-index: 9999; 
} 

.notifications > div { 
    position: relative; 
    z-index: 9999; 
    /* margin: 5px 0px;*/ /*default value*/ 
    margin: 65px 10px; 
    display: inline-block; 
}

會正常工作。

但是，如果通知類如下所示，則它不會正確設置爲z-index。

.notifications { 
    width: auto; 
    max-width: 70%; 
    z-index: 9999; 
}

來源

2014-05-21 13:16:17 eraW

z-index不按預期工作（Chrome和Opera）

回答

相關問題