包含位置：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); }