如何在不使用位置和边距的情况下将元素定位在另一个元素之上？答案

【问题标题】：How to position an element on top of another element without using position and margin?如何在不使用位置和边距的情况下将元素定位在另一个元素之上？
【发布时间】：2015-11-21 23:27:56
【问题描述】：

这是我的代码：

<table>...Some content...</table>
<table>...Another content...</table>

我想把第二张桌子放在第一张桌子的上面。这将用作电子邮件模板（在某些客户中，头寸和保证金不可用）。

【问题讨论】：

可能值得告诉我们您要解决什么问题，而不是“修复选择的解决方案”（即为什么需要覆盖 2 个表，目标是什么？）
因为第二个表格从第一个表格顶部开始 140px。第二个表格的高度为 300 像素。使用位置，您可以使用绝对位置和顶部 140 像素或使用 -160 像素的负边距来执行此操作。目标是在所有电子邮件客户端中都有这种布局。

标签： html css html-email email-templates

【解决方案1】：

这是仅有的两个可用选项（在transform 之外，如果position 不可用，这肯定不会起作用）将允许一个元素侵入另一个元素的空间。如果您不能使用position 或margin，那么您就不走运了，您需要重新评估您想要实现的目标以及原因。你有机会用图片做到这一点吗？

【讨论】：

这不是仅有的两个选项 - 事实上，您自己也提到了第三个选项 :-) 在电子邮件设计方面，图像可能是一个不错的选择，前提是您不需要您正在使用图像的图层来显示文本。除了辅助技术无法选择或读取基于图像的文本的问题之外，您也无法控制收件人是否会默认加载或阻止图像 - 因此，如果您去，将文本保留为文本非常重要图片路径。

【解决方案2】：

总有办法......并不总是优雅，但当你的选择有限时，'工作'通常是你真正需要的。国际海事组织，创造力既是用有限的选择解决问题，也是在“跳出框框”思考。

大多数电子邮件客户端都允许您设置“高度”，因此只需将第一个表格（背景）包装在一个 div 中并给该 div height:0px;。表格将溢出 div，但下一个元素不会尊重它的空间，因为它的高度为 0，并且将有效地在前面分层。

http://jsfiddle.net/L0d3tnzu/

如果您希望表格的大小完全匹配，您可能必须明确设置高度和宽度，但上面的小提琴说明了基本概念。希望这会有所帮助！

编辑：根据评论中的附加信息（第二个表应该只与第一个表部分重叠）这里是一个更新的小提琴：https://jsfiddle.net/acq3ob6y/1/

编辑#2：当。 Outlook 切换到 HTML/CSS 的 Word/Office 渲染引擎可能是比 IE 版本更糟糕的唯一方法。叹。（感谢@Gortonington 的评论/澄清！）

好吧，那么，背景图像的想法只是视网膜显示器的一个问题（如果你希望它们都清晰、漂亮和视网膜即），视网膜设备将以更现代的方式处理 CSS方式（希望如此！），那么作为解决方案如何：Media Query 定位设备分辨率使用双倍尺寸的 img 加载 CSS 并使用 css background-size 对其进行约束：http://jsfiddle.net/tcyjo7ok

第三次尝试是魅力？至少选项列表在增加...

【讨论】：

感谢瑞恩的回复。问题是第一个表格中的内容有一个带有宽度和高度的 img（这是因为视网膜图像而需要的）。
这应该不是这个方法的问题，宽度和高度可以像我提到的那样指定。如果您可以发布您的实际表格代码并分叉小提琴，我很乐意看看。如果您有链接，则链接到它在 Outlook 之外的外观（您想要的结果）也会有所帮助。旁注：这似乎是一个非常边缘的情况，您将使用 Outlook 作为电子邮件客户端的用户在具有视网膜显示的设备上 - 也许您可以使用诸如 background-size 之类的 CSS 属性来定位具有 Outlook 和其他人会忽略吗？
我想要的最终结果是这样的：jsfiddle.net/035wcwok。请注意，我应用了一个负边距顶部，这将在某些电子邮件客户端中中断。我也在使用这个框架：zurb.com/ink
我已经通过添加包装器 div 并设置它的高度来反映您想要实现的部分重叠（第一个表的高度 -100px，所以height:200px;）来更新它。请参阅我添加到答案中的第二个小提琴链接。希望对你有用！
我想我是使用您的解决方案做到的：jsfiddle.net/035wcwok/1 非常感谢。

【解决方案3】：

在电子邮件客户端中叠加两个元素的唯一方法是使用背景图片。即使这在某些客户端中也可能被破坏，并且需要大量的条件代码和重复代码（backgrounds.cm 是电子邮件 bg 图像的好资源）。

这是在 MOST 客户端中显示的唯一选项。即使这仍然非常受限并且使用起来不是很灵活（但在所有电子邮件编码中都是如此）。大多数其他技术仅适用于几个客户，而在所有其他技术中完全失效。

【讨论】：