html - 找不到办法做到这一点

Question

你好 Stack Overflow 社区。

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

在第一个 block 中有一个 100% 高度和 400px 宽度向左浮动的 div。

在第二个 block 中有相同大小的 div 但向右浮动。问题是第一 block 图片是png，她的底部透明约10%。

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

这是 jsfiddle 示例:https://jsfiddle.net/c7m6pm4w/在这个 jsfiddle 中，您可以看到绿色和浅绿色在蓝色下方。那么我怎样才能使 div.three(aqua) 在 div.four(blue) 上但在 div.one(red) 下。 div.two(green) 会在 div.one(red) 上，但在 div.four(blue) 下？

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

这是它的外观示例:

Answer 1

为了理解您的意思，我必须制作一些带标签的贴纸(原始问题中的图像已在稍后添加)。据我所知，你想要这样的东西:

不，您不能使用 CSS 执行此操作。至少，使用 z-indexes。

zi4 < zi3 < zi1
zi1 < zi2 < zi4

zi4 < zi1
zi1 < zi4

Impossible.

您可以使用第五个 div 颜色作为第一个来创建四个元素相互重叠的错觉。然而，创建这种不一致、不受支持的 HTML 确实没有正常的原因；这就是为什么没有正常的解决方案。

这是 good related SO question以“错觉”为例。
另外，我已经实现了一个 JSFiddle针对您的情况。