无法找到办法做到这一点

Question

Hello Stack Overflow社区。

我有两个div块。这是宽度为1280像素和高度为700像素的图像。

在第一个区块中，div为100％高度，400px宽度左侧浮动。

并且在第二个区块中有相同大小的div但是向右浮动。问题是第一个块图片是png，她的底部透明度约为10％。

第二块图片顶部透明10％。我是第二张图片加入他们。现在我无法隐藏这些高度为100％的div。我尝试过使用z-index，但它只隐藏了一个。

所以这里是jsfiddle示例：https://jsfiddle.net/c7m6pm4w/在这个jsfiddle中你可以看到绿色和浅绿色是蓝色的。那么我怎样才能使div.three（aqua）在div.four（蓝色）上，但在div.one（红色）下。 div.two（绿色）将在div.one（红色）上，但在div.four（蓝色）下？

<div class="one">
  <div class="two"></div>
</div>
<div class="four">
  <div class="three"></div>
</div>

以下是它的外观示例：

Answer 1

为了理解你的意思，我必须制作一些带标签的纸质贴纸（原始问题中的图像后来被添加）。据我所知，你想要这样的东西：

不，你不能用CSS做到这一点。至少，使用z索引。

zi4 < zi3 < zi1
zi1 < zi2 < zi4

zi4 < zi1
zi1 < zi4

Impossible.

您可以使用第五个div作为第一个div创建一个彼此重叠的四个项目的错觉。但是，创建这种不一致，不受支持的HTML实际上没有正常的理由;这就是没有正常解决方案的原因。

以下是good related SO question以“幻觉”为例 另外，我已为您的案例实施了JSFiddle。

Answer 2

我想到的最简单的方法是将它们全部拆分成九格网格：

HTML：

<div id="b11" class="cell"> </div>
<div id="b12" class="cell"> </div>
<div id="b13" class="cell"> </div>
<div id="b21" class="cell"> </div>
<div id="b22" class="cell"> </div>
<div id="b23" class="cell"> </div>
<div id="b31" class="cell"> </div>
<div id="b32" class="cell"> </div>
<div id="b23" class="cell"> </div>

CSS：

div.cell {
    height: 100px;
    width: 150px;
}
#b11 {
    background-color: green;
    float: left;
}
#b12 {
    background-color: red;
    float: left;
}
#b13 {
    background-color: red;
    xfloat: left;
}

#b21 {
    background-color: green;
    float: left;
}
#b22 {
    background-color: white;
    float: left;
}
#b23 {
    background-color: aqua;
    xfloat: left;
}

#b31 {
    background-color: blue;
    float: left;
}
#b32 {
    background-color: blue;
    float: left;
}
#b33 {
    background-color: aqua;
    xfloat: left;
}

（对于科西嘉，你必须“调整”各个宽度和高度，还要为边框添加一些额外的单元格。）

为什么不呢？