1

I have a grid layout of elements that are positioned by Isotope JS, which is a requirement for this project. It works nicely, but the elements that are "isotoped" are positioned using position: absolute and CSS3 transforms.

I am trying to dynamically place another div underneath one of the rows of the grid. This is very similar to the layout of Google Images - there is an image grid and when one is clicked, a black box pops down underneath of that images row which spans the width of the page.

Here is a jsfiddle with an example of what I'm trying to accomplish: http://jsfiddle.net/TfWdk/1/

The green div represents the pop down box. I am going to dynamically insert it after the article that is clicked using javascript. The problem is that, as you can see in the fiddle, it won't place correctly because the items (red boxes) are positioned with position: absolute.

The only requirement here is that Isotope is used, and therefore the items must have the absolute positioning and CSS3 transforms that are present in the fiddle. If there is a way around this with some Isotope settings, I am open to it. The solution I am currently mapping out involved shoving every element beneath the clicked row down with javascript, positioning the dropdown with javascript, and then displaying it. Obviously I would prefer a solution that simply involved inserting the dropdown HTML on the page and letting the browser do the positioning.

Also note that I am using the webkit transforms, so this might look funny in Firefox/IE.

4

1 に答える 1

2

This should do what you need:

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); }
于 2013-03-24T23:28:19.077 に答える