包含位置：div內的絕對元素，以便可以在前後插入一個位置：relative div

Question

我有一個由Isotope JS定位的元素的網格佈局，這是此項目的要求。它很好地工作，但是「同位素」元素使用position: absolute和CSS3變換來定位。

我想動態地將另一個div放在網格的其中一行之下。這與Google Images的佈局非常相似 - 有一個圖像網格，當點擊一個圖像網格時，黑色框會在跨越頁面寬度的圖像行下面彈出。

這裏是什麼，我試圖完成一個例子的的jsfiddle：http://jsfiddle.net/TfWdk/1/

綠色格代表彈出下拉框。我將在使用javascript單擊的文章之後動態插入它。問題是，正如你可以在小提琴中看到的那樣，它不會正確放置，因爲這些物品（紅色方塊）的位置是position: absolute。

這裏唯一的要求是使用同位素，因此這些項目必須具有絕對定位和CSS3轉換，它們存在於小提琴中。如果在某些同位素設置的情況下可以解決這個問題，我很樂於接受。我目前所繪製的解決方案涉及使用javascript將點擊行下面的每個元素向下推，使用javascript定位下拉列表，然後顯示它。顯然，我更喜歡一個解決方案，只需在頁面上插入下拉HTML並讓瀏覽器進行定位。

另請注意，我使用的是webkit轉換，所以這可能在Firefox/IE中看起來很有趣。

Answer 1

這應該做你需要的東西：

http://jsfiddle.net/ytVvW/

.container { 
    width: 866px; 
    height: 600px; 
    border: 1px solid #ccc; 
    position: relative; 
} 

.item { 
    width: 274px; 
    height: 180px; 
    margin: 5px; 
    float: left; 
    border: 1px solid red; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.overlay { 
    width: 100%; 
    height: 50px; 
    background-color: #333; 
    position: absolute; 
    float: left; 
} 

.dropdown { 
    width: 100%; 
    height: 40px; 
    background-color: green; 
    display: block; 
    top: 190px; 
    position: relative; 
} 

.row { 
    position: relative; 
} 

#tl { -webkit-transform: translate3d(0px, 0px, 0px); } 
#tc { -webkit-transform: translate3d(290px, 0px, 0px); } 
#tr { -webkit-transform: translate3d(580px, 0px, 0px); } 
#bl { -webkit-transform: translate3d(0px, 203px, 0px); }