如何定位兩個透明圖像重疊容器的對角div

我從一個印刷圖形設計師那裏得到了這個PSD comp，我不確定它在網上是否可行。
請注意，黑色邊框的圓角容器（如下圖所示）已存在。在這個頁面上有幾個z-indexed的div，所以很難確定哪個在堆疊順序中具有優先級。如何定位兩個透明圖像重疊容器的對角div

enter image description here

正如你所看到的，我已經在上面的兩個灰色絲帶駐紮在左上角和右下角，有兩個圖像的速度（在（代表用絲帶和裝飾品的盒子）更小的藍色方塊，即：To：/ From :)在這些「色帶」的下方，但位於容器頂部。容器的背景顏色是白色的。左上角必須有一個透明的背景，以便較小的藍色框顯示出來。有人能告訴我這些「傾斜的絲帶」在這個圓角集裝箱div上的位置嗎？或者，如果這甚至可以使用CSS和HTML來完成。

來源

2011-10-24 Chris22

你使用'z-index' CSS屬性嗎？ – Blazemonger

是的，如果這是唯一的方式 – Chris22

最簡單的答案是有兩個<img>的，並讓他們都絕對定位。用top:0px; left:0px定位一個;和一個bottom:0px; and right:0px;。給他們一個高z-索引，以確保他們在div的頂部。確保父div有position: relative定義。

來源

2011-10-24 15:50:24 Whetstone

謝謝我會嘗試。 – Chris22

確保你更新了你的帖子，並且將問題標記爲已解決，否則未來的Google員工將會因此而愛你:)。 – Whetstone

我一定會標記有效的答案。我只是通過文章閱讀，然後我會在這裏嘗試兩個答案。我可能不得不做一些Z-索引，因爲我有另外兩個圖像（小藍框）需要放在色帶後面，還有文本，對吧？謝謝 – Chris22

如何定位兩個透明圖像重疊容器的對角div

回答

相關問題