Question

我有一个按Isotope JS定位的元素的网格布局，这是此项目的要求。它运行良好，但“isotoped”元素使用position: absolute和CSS3转换定位。

我正在尝试动态地将另一个div放在网格的一行下面。这与Google图像的布局非常相似 - 有一个图像网格，当点击一个图像时，会在该图像行的下方弹出一个黑色框，该行跨越页面的宽度。

这是一个jsfiddle，其中有一个我想要完成的例子：http://jsfiddle.net/TfWdk/1/

绿色div表示弹出框。我将在使用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); }

包含位置：div内部的绝对元素，以便位置：相对div可以在它之前和之后插入

1 个答案: