Photoshop拼接中的重叠图像，如何使用CSS浮动答案

【问题标题】：Overlapping image in photoshop splice, how to float with CSSPhotoshop拼接中的重叠图像，如何使用CSS浮动
【发布时间】：2011-11-01 23:04:26
【问题描述】：

这是我正在开发的网站：

我的问题是右上角的红色框。我拼接的网站是 Photoshop 但由于该部分重叠，我需要将图像分成 2 部分。我将如何将红色框放置在其他所有内容上？ z 深度可能吗？

我当然会将它保存为 png 以保存透明度，但我什至不知道从哪里开始让它漂浮在现有的 2 张图片上

请帮忙！

【问题讨论】：

【解决方案1】：

在包含您的图像的<td> 上（我们称之为<td class="imageholder">）：

td.imageholder { position: relative; }

从那里开始，无论浏览器窗口如何，cenk 的解决方案都将起作用。

解释： 绝对定位元素查看其容器元素，默认为整个文档。如果一个绝对定位的元素在另一个具有 position: absolute 或 relative 的元素内，它将使用它作为定位的起点。

【讨论】：

hmm... 也许我做错了，这是我所做的 html： css: img#rightAligned { position: absolute;顶部：47px；右：192px； } td.imageholder { 位置：相对； }
您能否使用您的新代码更新实时示例，以便我们查看？
我刚刚意识到这在 FireFox 中不起作用......为什么会这样？ graves-incorporated.com/test_sites/solera_new

【解决方案2】：

这是一个开始：

HTML

   <img src="your-transparent-file.png" id="rightAligned"/>

CSS

img#rightAligned {
   position: absolute;
   top: 50px; // adjust
   right: 20px; // adjust
}

【讨论】：