如何定位两个透明图像以重叠容器div的对角

Question

我从印刷图形设计师处获得了这个PSD组件，我不确定它在网络上是否可行 请注意，带有黑色边框的圆角容器（如下图所示）已经存在。此页面上有几个z-indexed div，因此很难确定哪一个在堆叠顺序中具有优先级。

正如你所看到的，我在左上角和右下角有两条灰色条带（代表一个带有色带和装饰的盒子），还有两个图像（较小的蓝色框即：To ：/ From :)在那些“丝带”下面但在容器顶部。容器的背景颜色为白色。左上角必须具有透明背景，以便显示较小的蓝色框。有人能告诉我这个“倾斜的缎带”在这个圆角容器div上的定位吗？或者，如果甚至可以使用CSS和HTML来完成。

Answer 1

最简单的答案是拥有两个<img>，并让它们都绝对定位。定位一个top:0px; left:0px;和一个bottom:0px; and right:0px;给他们一个高z指数，以确保他们在div的顶部。确保父div已定义position: relative。