CSS：z索引同時使用浮動：左圖像畫廊

我有隨機產生的內容的圖像集：CSS定位這些圖像是：CSS：z索引同時使用浮動：左圖像畫廊

.item { 
    width: 200px; 
    margin: 10px; 
    float: left; 
}

我有一些JQuery的該隨機地選擇其中的一個在畫廊圖像，並通過使用.addClass和下面的CSS雙打其長度：

.frontpageimagelong { 
    height: 200px; 
    width: 420px; 
}

麻煩越長形象得到下面的圖片下夾着。我需要將它覆蓋或出現在以下圖像上方。

我想過使用Z-指數爲這樣：

.item { 
    width: 200px; 
    margin: 10px; 
    float: left; 
    position: relative; 
    z-index: 1; 
} 

.frontpageimagelong { 
height: 200px; 
width: 420px; 
position: relative; 
z-index: 99; 
}

但這並沒有改變任何東西。有沒有人有任何建議，以一個很好的方式去做到這一點？由於

編輯：問題的補充圖像：

enter image description here

來源

2012-12-12 MeltingDog

浮動元素* always *顯示在定位元素下，* always顯示在非定位元素上，根據MDN的[規則堆疊（https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_and_float）。也許嘗試讓長影像完全定位？ – apsillers

你可以創建一個小提琴再現這個問題..這是很難說沒有HTML .. –

嗯奇怪的夠了，相反似乎正在發生在我身上。定位的圖像後退（現在有2幅圖像覆蓋全部圖像），而浮動圖像全部出現在前面） – MeltingDog

感謝您的幫助所有。我沒有解決這個問題，但我解決了這個問題。我使用了一些JQuery來查找longimage右側的圖像，然後再次使用JQ刪除圖像。因此，.item div仍然存在，只是沒有圖像，因此無形。

來源

2012-12-12 02:22:57 MeltingDog

CSS：z索引同時使用浮動：左圖像畫廊

回答

相關問題