在div中包含position:绝对元素，以便可以在其前后插入position: relative div
在div中包含position:绝对元素，以便可以在其前后插入position: relative div
提问于 2013-03-25 07:11:22
我有一个由Isotope JS定位的元素的网格布局，这是这个项目的一个要求。它工作得很好，但是使用position: absolute和CSS3转换来定位“同位素”的元素。
我试图动态地将另一个div放在网格的一行下面。这与Google Images的布局非常相似--有一个图像网格，当点击一个网格时，一个黑框就会在横跨整个页面宽度的图像行的下面弹出。
下面是一个jsfiddle，其中包含我正在尝试实现的一个示例：http://jsfiddle.net/TfWdk/1/
绿色的div表示弹出框。我打算将它动态地插入到使用javascript点击的文章后面。问题是，正如您在小提琴中看到的那样，它不能正确放置，因为项目(红框)是用position: absolute定位的。
这里唯一的要求是使用Isotope，因此项目必须具有小提琴中存在的绝对定位和CSS3变换。如果有一些同位素设置的方法可以解决这个问题，我愿意接受。我目前正在规划的解决方案包括使用javascript将单击行下面的每个元素向下推，使用javascript定位下拉列表，然后显示它。显然，我更喜欢简单地在页面上插入下拉HTML并让浏览器进行定位的解决方案。
还请注意，我使用的是webkit转换，所以这在Firefox/IE中可能看起来很有趣。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-25 07:28:19
这应该能满足您的需求：
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); }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15605244
复制相关文章
相似问题
腾讯云开发者
