javascript - 实现没有Position属性的绝对定位，使用Margin/Padding

Question

我正致力于构建基于电子邮件的 HTML。现在我们知道，电子邮件客户端没有很好地支持位置属性，所以我将不得不在没有它的情况下继续。现在，看看我的选择......我可以选择 Margin 或 padding 来定位元素。输入元素可以相对定位或绝对定位。我现在只考虑绝对部分。所以，我的输入将是例如

One Parent DIV (top:0, left:0)
A Child DIV (top:20, left:20)
Second Child DIV (top:20, left: 200)

现在，在基于 HTML 的普通浏览器中，这些元素可以很容易地放置在适当的位置。但是没有 position: absolute 甚至 top, left 属性。它变得很棘手，因为 margin 属性相对于其他元素排列元素。这是一个示例运行:

<div style="width: 600pt; height: 600pt; border:2px solid red; margin-left:20pt; margin-top: 30pt">
    <div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
    <div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
    <div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
</div>

Fiddle

我的预期结果是，所有黑色 div 相互重叠，并放置在同一位置。如果它根据“父元素”计算边距，这是可能的，但它是从父元素左边和从前面的元素顶部边距。

所以我现在的问题是，有没有一种方法可以使用 marging-left, top 作为 top, left 属性并产生与 position:absolute 相同的行为？或者简单地说，使用 margin 或 padding 属性将这三个元素放在彼此之上(没有位置，因为电子邮件客户端不支持)

我也知道，将 Divs 用于电子邮件并不是最好的方法，我应该考虑使用表格，但请相信我，我正在处理的 HTML 只能使用 Divs 生成，有些则使用边距或填充。任何帮助将不胜感激。

Answer 1

您可以使用负边距来实现重叠。

margin-top: -50pt

http://jsfiddle.net/pkdqh7kt/1/

这是水平堆叠 div 的示例:

http://jsfiddle.net/pkdqh7kt/2/

您也可以查看this table找出主要电子邮件客户端目前支持哪些 CSS 属性。