Css overlapperd click

Question

I'm building a strange div shaped structure and I need a hint to resolve a clicking problem.

This is a jsfiddle to show you the issue. The structure for each element is:

    <div class="views-row">
       <div class="diamonds-container">  
          CONTENT
       </div>
   </div>

I have a onclick() event on .diamonds-container but the .views-row div of the next element [with red or blue background..] go over the container and stop the click event on it.

I tryed to play with the z-index but I didn't have the expected result.

How can I achieve this structure with a correct click event on diamonds-containers ?

I think I can track the .views-row click with javascript and trigger manually a click on the previous diamonds-container but this will be my final option.

How can I achieve this without javascript?

UPDATE:

I have to position my diamonds like this

so I can't use the @matewka code because I will have the overlaping vertically instead of orizzontally..

Answer 1

There is more than one route for this kind of problem.

If you use the rotation transform anyway, why not rotate the .views-row element to get the bounding box out of the way?

For recent browsers and IE11 there are pointer events. See this updated fiddle.

.views-row {
    z-index: 1;
    pointer-events: none;
}

.diamonds-container {
    z-index: 9;
    pointer-events: auto;
}

Answer 2

Here is my approach. I'm not sure if nesting two divs inside each other was for rotating purpose or had some other meaning. Anyway, I did it this way:

.views-row {
    width: 130px;
    height: 130px;
    -webkit-transform: rotate(45deg);
}
.views-row-first {
    -webkit-transform-origin: 195px center;
}
.views-row-even {
    -webkit-transform-origin: center center;
}
.views-row-odd {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: -65px center;
}

Each .views-row is rotated and the transform origins are all pointed to the center of the middle div. Notice that the transform-origin values are multiplicities of the half of the width (130px / 2).
See the updated FIDDLE for the complete CSS. I also added a :hover property for .diamonds-container so you can see that they're all clickable.

UPDATE

With the picture you added the problem became much more complicated. But I figured it out.
Hint: If you can't wait for the fiddle - you'll find it at the bottom of the answer.

The idea:

Square boxes are nested twice. Each 2 .diamond boxes are wrapped with the .pair-wrapper div. That div is rotated 45deg and it is repeated few times along its container. Each even .pair-wrapper has increased width to position its right-hand neighbour properly.

A bunch of .pair-wrappers are wrapped with the .line-wrapper. You can add as much .line-wrappers and .pair-wrapper as you want (remember - .pair-wrappers will break into the new line if they don't fit).

Finally, each .line-wrapper has fixed height and hidden overflow to restrict its children area from the top and the bottom. Each .pair-wrapper is positioned relatively and has negative top value.

The solution is based mostly on fixed values, both I could figure out a better idea.

The code

Example HTML markup looks like this:

<div class="line-wrapper line-wrapper-odd">
    <div class="pair-wrapper pair-wrapper-odd">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
    <div class="pair-wrapper pair-wrapper-even">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
    <div class="pair-wrapper pair-wrapper-odd">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
</div>
<div class="line-wrapper line-wrapper-even">
    <div class="pair-wrapper pair-wrapper-odd">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
    .....
</div>
.....

And the most important parts from CSS (complete CSS in the fiddle):

.line-wrapper {
    height: 170px;
    overflow: hidden;
}
.line-wrapper-even {
    margin-left: -92px;
}
.pair-wrapper {
    width: 130px;
    position: relative;
    top: -26px;
    -webkit-transform: rotate(45deg);
}
.pair-wrapper-odd {
    -webkit-transform-origin: 65px 65px;
}
.pair-wrapper-even {
    -webkit-transform-origin: 92px 131px;
    width: 239px;
}
.diamond-box {
    width: 130px;
    height: 130px;
}

The fiddle

http://jsfiddle.net/N3V6J/3/