CSS重叠点击

Question

我正在构建一个奇怪的 div 形状的结构，我需要一个提示来解决点击问题。

这是一个jsfiddle 向您展示问题。 每个元素的结构是：

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

我在 .diamonds-container 上有一个 onclick() 事件，但下一个元素的 .views-row div [具有红色或蓝色背景..] 越过容器并停止其上的单击事件。

我尝试使用 z-index，但没有得到预期的结果。

如何在 diamonds-containers 上通过正确的点击事件来实现这种结构？

我认为我可以使用 javascript 跟踪 .views-row 点击并手动触发对先前钻石容器的点击，但这将是我的最终选择。

如果没有 javascript，我怎样才能做到这一点？

更新：

我必须像这样定位我的钻石

所以我不能使用@matewka 代码，因为我会有垂直重叠而不是orizzontally..

Answer 1

这类问题的路径不止一种。

如果您仍然使用旋转变换，为什么不旋转.views-row 元素以使边界框不碍事？

对于最近的浏览器和 IE11，有指针事件。请参阅此更新的fiddle。

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

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

Answer 2

这是我的方法。我不确定将两个 div 相互嵌套是出于旋转目的还是有其他含义。无论如何，我是这样做的：

.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;
}

每个.views-row 都被旋转并且变换原点都指向中间div的中心。请注意，transform-origin 值是宽度一半的重数 (130px / 2)。
请参阅 updated FIDDLE 了解完整的 CSS。我还为.diamonds-container 添加了:hover 属性，因此您可以看到它们都是可点击的。

更新

使用您添加的图片，问题变得更加复杂。但我想通了。
提示：如果你等不及小提琴 - 你会在答案的底部找到它。

想法：

方框嵌套两次。每个 2 .diamond 框都用 .pair-wrapper div 包裹。该 div 旋转 45deg 并沿其容器重复几次。每个甚至 .pair-wrapper 都增加了宽度以正确定位其右侧邻居。

一堆.pair-wrappers 被.line-wrapper 包裹起来。您可以根据需要添加任意数量的 .line-wrappers 和 .pair-wrapper（请记住 - 如果不合适，.pair-wrappers 将插入新行）。

最后，每个.line-wrapper 都有固定的高度和隐藏的溢出，以从顶部和底部限制其子区域。每个.pair-wrapper 都是相对定位的，具有负的top 值。

解决方案主要基于固定值，我可以想出一个更好的主意。

代码

示例 HTML 标记如下所示：

<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>
.....

以及 CSS 中最重要的部分（小提琴中的完整 CSS）：

.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;
}

小提琴

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